将相同数据的柱形图和折线图组合在同一个容器中（Highcharts）

Question

我想构建一个包含多个系列的柱形图和一个折线图的组合图表。问题是我从嵌套的 JSON 响应中获取高图表数据。为此，我初始化了数组，并且该数组在 plotoptions highcharts 中连续给出，如下面的代码所示。

我的代码是这样的：

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

}); 

这是我在编写图表类型列时得到的柱形图。

这是我在 highcharts 中将类型列更改为样条曲线时得到的折线图。

这是我的 JSON 数据（Highcharts 数据）：

{
  "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
          }
        ]
      }
    }
  ]
}

我想在同一个容器中将它们与相同的数据结合起来。问题在于如何告诉 highcharts 多个系列应该用具有相同数据的行和列类型表示。为此，当我编写系列时：[{ data: crime_data ,type: spline }] 而不是 series:crime_data 在这种情况下，我没有得到 Highcharts 数据。任何人都可以请帮助我该怎么做。请建议我。

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]
    },]

这里是fiddle 了解更多详情。

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/

下面的输出：