如何将对象用作Highcharts的系列

how to use object as series for Highcharts

本文关键字：Highcharts 系列 对象      更新时间：2023-11-06

我对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
});

})；

图表显示为空白。

有人能帮我做这项工作吗？

谢谢。

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

您可以将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] 
  }; 
});

相关文章：