高图表格式

问题描述 投票:0回答:1
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显示不同的颜色。现在我得到了所有酒吧的不同颜色,我想根据不同的人对这些时段进行分组。我陷入图表表示需要更好的图表配置。

charts highcharts bar-chart stacked-chart
1个回答
0
投票

这里的解决方案似乎是预处理系列数据(链接和着色),如下所示:

 [{
    '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

© www.soinside.com 2019 - 2024. All rights reserved.