如何将对象用作Highcharts的系列

时间:2016-04-02 10:20:36

标签: javascript arrays highcharts

我是javascript和Highcharts的新手,如果这是一个愚蠢的问题,我真的很抱歉。

我有一个像这样的对象(称为val):

Object {month:Array [12],corporate:Array [12],family:Array [12],party:Array [12]}

每个数组都包含企业/家庭/聚会的销售价值。

我希望随着时间的推移在Highcharts中创建一条包含3行(公司,家庭,派对)的折线图。

以下是我的代码:

$(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
});

});

图表显示为空白。

有人可以帮我解决一下这项工作的方法吗?

谢谢。

1 个答案:

答案 0 :(得分:2)

如果您在highcharts演示中查看选项,您可以看到如何指定系列。 Highcharts basic line demo

您可以将val更改为以下内容:



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] 
  }; 
});