Highcharts不止一个系列

Question

我有一个简单的json文档：

＆＃xA;＆＃xA;

  [{＆＃xA; “x”：“a”，＆＃xA; “y”：2＆＃xA;}，{＆＃xA; “x”：“b”，＆＃xA; “y”：8＆＃xA;}，{＆＃xA; “x”：“c”，＆＃xA; “y”：4＆＃xA;}，{＆＃xA; “x”：“d”，＆＃xA; “y”：15＆＃xA;}]＆＃xA;  

＆＃xA;＆＃xA;

我想使用具有4个系列的Highcharts对其进行可视化。然而，我可以成功，数据只出现在一个系列中（见下图）。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

以下是代码的一部分：< / p>＆＃xA;＆＃xA;

  var options = {＆＃xA;。＆＃xA;。＆＃xA;。＆＃xA; series：[{}]＆＃xA;};＆＃xA;＆＃xA;。＆＃xA;。＆＃xA;。＆＃xA; var data = JSON.parse（json）;＆＃xA;＆ #xA; var seriesData = []; ＆＃xA; for（var i = 0; i＆lt; data.length; i ++）{＆＃xA; seriesData.push（[data [i] .x，data [i] .y]）; ＆＃XA; options.xAxis.categories.push（data [i] .x）; ＆＃XA;}＆＃XA;＆＃XA; options.series [0] .data = seriesData;＆＃xA; var chart = new Highcharts.Chart（options）; ＆＃xA;  

＆＃xA;＆＃xA;

还更新系列

＆＃xA;＆＃xA;

  chart.series [0 ] .update（{＆＃xA; type：type，＆＃xA;}）;＆＃xA;  

＆＃xA;＆＃xA;

工作正常。

＆＃xA;＆＃xA;

使用

＆＃xA;＆＃xA;

  options.series.push（{name：data [i] .x，data：[data [i] .x，data [i] .y]}）; ＆＃xA;  

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  chart.series [0] .update（{＆＃xA; type：type，＆＃xA;}）;＆＃xA;  

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

任何提示？

＆＃xA;＆＃xA;

编辑：部分适合我的代码：

＆＃xA;＆＃xA;

  var options = {＆＃xA;图表：{＆＃xA; renderTo：'container'，＆＃xA;输入：'column'// default＆＃xA;＆＃xA; }，＆＃XA;标题：{＆＃xA;文字：''＆＃xA; }，＆＃XA;＆＃XA; yAxis：{＆＃xA;标题：{＆＃xA; enabled：true，＆＃xA; text：'Count'，＆＃xA;风格：{＆＃xA; fontWeight：'normal'＆＃xA; }＆＃XA; }＆＃XA; }，＆＃XA;＆＃XA; xAxis：{＆＃xA;标题：{＆＃xA; enabled：true，＆＃xA;文字：''，＆＃xA;风格：{＆＃xA; fontWeight：'normal'＆＃xA; }＆＃XA; }，＆＃XA;类别：[]，＆＃xA;十字准线：真＆＃xA; }，＆＃xA;＆＃xA; plotOptions：{＆＃xA;馅饼：{＆＃xA; innerSize：125，＆＃xA;深度：80＆＃xA; }，＆＃XA;专栏：{＆＃xA; pointPadding：0.2，＆＃xA; borderWidth：0，＆＃xA;分组：false＆＃xA; ＆＃xA;＆＃xA; }，＆＃xA;系列：[{}]＆＃xA; } && xA;＆＃xA;＆＃xA; //设置类型＆＃xA; $。each（['column'，'pie']，function（i，type）{＆＃xA; $（'＃ '+ type）.click（function（）{＆＃xA;＆＃xA;＆＃xA; chart.series [0] .update（{＆＃xA; type：type＆＃xA;}）;＆＃xA ;＆＃xA;}）;＆＃xA;＆＃xA;＆＃xA;＆＃xA; var data =获取数据fom json文件**＆＃xA;＆＃xA; var seriesData = [];＆ #xA; for（var i = 0; i＆lt; data.length; i ++）{＆＃xA; seriesData.push（[data [i] .x，data [i] .y]）;＆＃xA; options .xAxis.categories.push（data [i] .x）;＆＃xA;＆＃xA;＆＃xA;}＆＃xA;＆＃xA; options.series [0] .data = seriesData;＆＃xA ; var chart = new Highcharts.Chart（options）;＆＃xA;＆＃xA;}）;＆＃xA;＆＃xA;}）;＆＃xA;  

＆＃xA;

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/