Question

如何使用对象作为 Highcharts 的系列

2016-04-02

106

javascript arrays highcharts

我对 javascript 和 Highcharts 还很陌生，所以如果这是一个愚蠢的问题，真的很抱歉。

我有一个像这样的对象（称为 val）：

对象 {month: Array[12], corporate: Array[12], family: Array[12], party: Array[12]

每个数组都包含 corporate/family/party 随时间变化的销售价值。

我想在 Highcharts 中创建一个随时间变化的带有 3 条线（corporate、family、party）的折线图。

以下是我的代码：

$(function () {
$('#expandable-3').highcharts({
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: val
});

});

图表显示为空白。

有人可以帮我完成这项工作吗？

谢谢。

Answer 1

如果您查看 highcharts 演示中的选项，您可以看到如何指定系列。 Highcharts 基本线演示

var val = [
  {
    name: 'corporate',
    data: [1,2,3]
  },
  {
    name: 'family',
    data: [1,2,3]
  },
  {
    name: 'party',
    data: [1,2,3]
  }
];

要转换数据，请使用类似以下内容：

Object.keys(val).map(function (key) { 
  return { 
    name: key, 
    data: val[key] 
  }; 
});