Highcharts 不止一个系列

Question

我有一个简单的 json 文档：

 [ {
  "x" : "a",
  "y" : 2
}, {
  "x" : "b",
  "y" : 8
}, {
  "x" : "c",
  "y" : 4
}, {
  "x" : "d",
  "y" : 15
} ]

我想使用具有 4 个系列的 Highcharts 对其进行可视化。我可以成功，但是，数据仅显示为一个系列（请参见下图）。

下面是部分代码：

  var options = {
.
.
.
 series: [{ }]
};

.
.
.
var data = JSON.parse(json);

 var seriesData = [];  
for (var i = 0; i < data.length; i++) { 
    seriesData.push([data[i].x, data[i].y]); 
    options.xAxis.categories.push( data[i].x ); 
}

  options.series[0].data = seriesData;
  var chart = new Highcharts.Chart(options);  

同时更新系列

chart.series[0].update({ 
              type: type, 
            });

工作正常。

使用

 options.series.push({name: data[i].x, data: [data[i].x, data[i].y]}); 

创建了 4 个系列，但没有适当地可视化并更新系列

chart.series[0].update({ 
          type: type, 
        });

不起作用，因此，我想专注于第一个提到的方法。

有什么提示吗？

编辑：部分适用于我的代码：

    var options = {
            chart: {
                renderTo: 'container',
                type: 'column'   //default

            },
            title: {
                text: ''
            },

            yAxis: {
                title: {
                    enabled: true,
                    text: 'Count',
                    style: {
                        fontWeight: 'normal'
                    }
                }
            },

            xAxis: {
                title: {
                    enabled: true,
                    text: '',
                    style: {
                        fontWeight: 'normal'
                    }
                },
                categories: [],
                crosshair: true
            } ,

            plotOptions: {
                pie: {
                    innerSize: 125,
                    depth: 80
                },
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                     grouping: false
                }  

            },   
             series: [{  }]
        };


// Set type
$.each(['column', 'pie'], function (i, type) {
    $('#' + type).click(function () { 


  chart.series[0].update({ 
                  type: type 
        }); 

 });



 var data = get the data fom json file**

 var seriesData = [];  
for (var i = 0; i < data.length; i++) { 
    seriesData.push([data[i].x, data[i].y]); 
   options.xAxis.categories.push( data[i].x ); 


}

  options.series[0].data = seriesData;
 var chart = new Highcharts.Chart(options);  

    });

});

Answer 1

您必须决定是要拥有 4 个不同的系列并一次更新所有 4 个系列，还是要拥有一个系列然后构建，例如自己的传奇。

如果你想有 4 个系列，将分组设置为 false，设置 xAxis 类别，每个点应该映射到一个带有一个点的系列 - point.x 应该有系列的索引。

const series = data.map((point, x) => ({ name: point.x, data: [{ x, y: point.y }]}))

const chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  plotOptions: {
    column: {
      grouping: false
    }
  },
  xAxis: {
    categories: data.map(point => point.x)
  },
  series: series
});

然后你可以更新你所有的 4 个系列：

  chart.series.forEach(series => series.update({
    type: series.type === 'column' ? 'scatter' : 'column'
  }, false))

  chart.redraw()

示例：http://jsfiddle.net/pdjqrj5y/