高图表格式答案

【问题标题】：High Chart Formatting高图表格式
【发布时间】：2017-12-21 13:29:45
【问题描述】：

vm.chartData = {
            'xAxis': [1512498600000, 1512585000000, 1512671400000, 1512757800000, 1512844200000, 1512930600000, 1513017000000, 1513103400000, 1513189800000, 1513276200000, 1513362600000, 1513449000000, 1513535400000, 1513621800000, 1513708200000, 1513794600000],
            'series': [{
                'name': 'Period 2',
                'data': [10, 2, 20, 40, 70, 40, 30, 33, 2, 23, 21, 32, 34, 12, 41, 21],
                'stack': 'Santanu N'
            }, {
                'name': 'Period 3',
                'data': [30, 3, 1, 23, 10, 21, 14, 45, 65, 80, 10, 90, 52, 12, 42, 14],
                'stack': 'Sourav M'
            }, {
                'name': 'Period 2',
                'data': [12, 23, 34, 45, 56, 67, 78, 89, 98, 87, 76, 65, 54, 43, 32, 21],
                'stack': 'Santanu N'
            }, {
                'name': 'Period 3',
                'data': [21, 76, 43, 12, 22, 40, 50, 20, 70, 60, 10, 40, 20, 80, 20, 11],
                'stack': 'Sourav M'
            }, {
                'name': 'Period 2',
                'data': [10, 2, 20, 40, 70, 40, 30, 33, 2, 23, 21, 32, 34, 12, 41, 21],
                'stack': 'Santanu NM'
            }, {
                'name': 'Period 3',
                'data': [30, 3, 1, 23, 10, 21, 14, 45, 65, 80, 10, 90, 52, 12, 42, 14],
                'stack': 'Sourav MN'
            }, {
                'name': 'Period 2',
                'data': [12, 23, 34, 45, 56, 67, 78, 89, 98, 87, 76, 65, 54, 43, 32, 21],
                'stack': 'Santanu NM'
            }, {
                'name': 'Period 3',
                'data': [21, 76, 43, 12, 22, 40, 50, 20, 70, 60, 10, 40, 20, 80, 20, 11],
                'stack': 'Sourav MN'
            }]
        };

你好，我想为 Period 1、Period 2 和 Period 3 显示不同的颜色。现在我得到了所有条形的不同颜色，我想根据不同的人对这些时期进行分组。我被困在图表表示中需要更好的图表配置。

【问题讨论】：

是条形图吗？如果是api.highcharts.com/highcharts/series.bar 在这里您可以找到为条形图提供的选项。或从这里api.highcharts.com/highcharts/series 您可以找到您的图表及其选项。
查看highcharts.com/demo/column-stacked
我将您的示例移至 jsfiddle：jsfiddle.net/kkulig/zhofw80z 这是想要的结果吗？
@KamilKulig 是的，你是对的，但在这个例子中，我得到了 4 个 period2 和 4 个 period3。而不是这个，我只需要 1 个 period2 和 1 个 period3 作为图表图例。如果我点击第 2 期图例，则所有第 2 期将被隐藏或显示。
请检查我的回答。

标签： charts highcharts bar-chart stacked-chart

【解决方案1】：

这里的解决方案似乎是像这样预处理系列数据（链接和着色）：

 [{
    'name': 'Period 2',
    'data': [10, 2, 20, 40, 70, 40, 30, 33, 2, 23, 21, 32, 34, 12, 41, 21],
    'stack': 'Santanu N',
    id: 'p2'
  }, {
    'name': 'Period 3',
    'data': [30, 3, 1, 23, 10, 21, 14, 45, 65, 80, 10, 90, 52, 12, 42, 14],
    'stack': 'Sourav M',
    id: 'p3'
  },
  // other series
  {
    'name': 'Period 3',
    'data': [21, 76, 43, 12, 22, 40, 50, 20, 70, 60, 10, 40, 20, 80, 20, 11],
    'stack': 'Sourav MN'
  }].map(function(s, i) {
    switch (s.name) {
      case 'Period 2':
        s.color = 'red';
        if (i > 1) {
          s.linkedTo = 'p2'
        }
        break;
      case 'Period 3':
        s.color = 'blue';
        if (i > 1) {
          s.linkedTo = 'p3'
        }
        break;
    }

现场演示： http://jsfiddle.net/kkulig/zhofw80z/

API 参考： https://api.highcharts.com/highcharts/plotOptions.series.linkedTo

【讨论】：