Объединение столбчатых и линейных диаграмм с одинаковыми данными в одном и том же контейнере (Highcharts)

Question

Я хочу построить комбинированную диаграмму с столбчатой ​​диаграммой с несколькими рядами и линейной диаграммой. Проблема в том, что я получаю данные High Charts из вложенного ответа JSON. Для этого я инициализировал массив, и этот массив даёт последовательно в plotoptions высокие диаграммы, как вы можете видеть в приведенном ниже коде.

Мой код такой:

var crime_data=[];
                   for(var i=0;i<result.themes.length;i++){
                          var crime={};
                          var test2 = result.themes[i];
                          var test = test2[Object.keys(test2)];
                         crime.name = Object.keys(result.themes[i]);
                         crime.data = [];
                           for(var k=0;k<test.yearTheme.length;k++){
                               var test3=test.yearTheme[k];
                              var test5=test3.individualValueVariable;
                               for(var j=0;j<test5.length;j++){
                                crime.data.push(test5[j].count);
                          };
                        };
                         crime_data.push(crime);
                             };

    var crimeChart = new Highcharts.Chart({
    chart: {
     renderTo: 'container1',
     type:'column'
    },
    title: {
        text: 'Crime'
    },
    xAxis: {
        categories: month,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
        credits: {
            enabled: false
    }, 
    tooltip: {

        shared: true,
    },
    plotOptions: {

        column: {
            pointPadding: 0.2,
            borderWidth: 0,

            depth: 25,
             allowPointSelect: true,
             cursor: 'pointer',
             point: {

              },

        }
    },
 series: crime_data

}); 

Это столбец диаграммы, который я получаю, когда пишу столбец типа диаграммы.

Это моя линейная диаграмма, которую я получаю, когда меняю тип столбца на сплайн на графике в верхних диаграммах.

И это мои данные JSON (данные High charts):

{
  "boundaries": {
    "boundary": [
      {
        "boundaryId": "55083021003",
        "boundaryType": "USA_CITY",
        "boundaryRef": "C1"
      }
    ]
  },
  "themes": [
    {
      "AssaultCrimeTheme": {
        "boundaryRef": "C1",
        "individualValueVariable": [
          {
            "name": "2013 Assault Crime",
            "description": "Assault Crime for 2013",
            "count": 18901
          },
          {
            "name": "2014 Assault Crime",
            "description": "Assault Crime for 2014",
            "count": 17707
          }
        ]
      }
    },
    {
      "BurglaryCrimeTheme": {
        "boundaryRef": "C1",
        "individualValueVariable": [
          {
            "name": "2013 Burglary Crime",
            "description": "Burglary Crime for 2013",
            "count": 17743
          },
          {
            "name": "2014 Burglary Crime",
            "description": "Burglary Crime for 2014",
            "count": 14242
          }
        ]
      }
    }
  ]
}

Я хочу объединить их обоих в одном и том же контейнере с одними и теми же данными. Проблема в том, как сказать, что старшие диаграммы должны представлять несколько рядов со строкой и с типом столбца с одинаковыми данными. Для этого, когда я пишу ряды:[{ data: crime_data, введите: spline }] вместо series:crime_data. В этом случае я не получаю данные High charts. Может кто-нибудь, пожалуйста, помогите мне, как я должен это сделать. Пожалуйста, предложите мне.

Answer 1

Передайте ваши данные, как показано ниже в формате. добавить тип диаграммы в каждом ряду данных; Здесь я заменил значение типа, но с теми же данными.

 [{
        type: 'line',
        name: 'AssaultCrimeTheme',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'line',
        name: 'BurglaryCrimeTheme',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'AssaultCrimeTheme',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'BurglaryCrimeTheme',
        data: [2, 3, 5, 7, 6]
    },]

Вот скрипка для более подробной информации.

Answer 2

Вот полный пример использования ваших данных.

const json = {
  "boundaries": {
    "boundary": [{
      "boundaryId": "55083021003",
      "boundaryType": "USA_CITY",
      "boundaryRef": "C1"
    }]
  },
  "themes": [{
    "AssaultCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Assault Crime",
        "description": "Assault Crime for 2013",
        "count": 18901
      }, {
        "name": "2014 Assault Crime",
        "description": "Assault Crime for 2014",
        "count": 17707
      }]
    }
  }, {
    "BurglaryCrimeTheme": {
      "boundaryRef": "C1",
      "individualValueVariable": [{
        "name": "2013 Burglary Crime",
        "description": "Burglary Crime for 2013",
        "count": 17743
      }, {
        "name": "2014 Burglary Crime",
        "description": "Burglary Crime for 2014",
        "count": 14242
      }]
    }
  }]
}

// Create categories object in order filter duplicates
const cats = {}
const series = json.themes.map((o) => {
  const key = Object.keys(o)[0]
  return {
    name: key,
    data: o[key].individualValueVariable.map((o) => {
      cats[o.name] = 1
      return { category: o.name, y: o.count }
    })
  }
})

// Convert categories object to array
const categories = Object.keys(cats)

// Chart options
const options = {
  chart: {type: 'column'},
  xAxis: {categories: categories},
  series: series
}

// Create chart
const chart = Highcharts.chart('container', options)

console.log(series, categories)

Пример из жизни: https://jsfiddle.net/Lo323gq3/

Выход ниже: