Question

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

您好，我想为时段1，时段2和时段3显示不同的颜色。现在我得到所有栏的不同颜色，我想根据不同的人对这些时段进行分组。我陷入图表表示需要更好的图表配置。

Answer 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

高图表格式

1 个答案: