Highcharts传奇如何显示多个图表数据类别？

时间：2018-02-06 09:43:58

标签： highcharts legend

This is my example 

crossSell1.push({ x: new Date(data[i][0]).getTime(), y: data[i][1], name: 'Category1' });
crossSell2.push({ x: new Date(data[i][0]).getTime(), y: data[i][2], name: 'Category2' });
crossSell3.push({ x: new Date(data[i][0]).getTime(), y: data[i][3], name: 'Category3' });
crossSell4.push({ x: new Date(data[i][0]).getTime(), y: data[i][4], name: 'Category4' });

renew1.push({ x: new Date(data[i][0]).getTime(), y: data[i][5], name: 'Category1' });
renew2.push({ x: new Date(data[i][0]).getTime(), y: data[i][6], name: 'Category2' });
renew3.push({ x: new Date(data[i][0]).getTime(), y: data[i][7], name: 'Category3' });
renew4.push({ x: new Date(data[i][0]).getTime(), y: data[i][8], name: 'Category4' });

upSell1.push({ x: new Date(data[i][0]).getTime(), y: data[i][9], name: 'Category1' });
upSell2.push({ x: new Date(data[i][0]).getTime(), y: data[i][10], name: 'Category2' });
upSell3.push({ x: new Date(data[i][0]).getTime(), y: data[i][11], name: 'Category3' });
upSell4.push({ x: new Date(data[i][0]).getTime(), y: data[i][12], name: 'Category4' });

传奇是否有任何方法只显示Category1，Category2，Category3，Category4？

预期

enter image description here

或者有更好的方法来制作我的榜样吗？

1 个答案:

答案 0 :(得分：0)

img

检查series.column.linkedTo，我相应更新了系列

series: [{
    name: 'Category 1', //updated name accordingly
    id: 'crossSell1',
    data: crossSell1,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#4E79A7'
  }, {
    name: 'Category 2',
    id: 'crossSell2',
    data: crossSell2,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#F28E2B'
  }, {
    name: 'Category 3',
    id: 'crossSell3',
    data: crossSell3,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#E15759'
  }, {
    name: 'Category 4',
    id: 'crossSell4',
    data: crossSell4,

    dataGrouping: {
      units: groupingUnits
    },
    color: '#59A14F'
  }, {
    name: 'Renew',
    data: renew1,
    linkedTo: 'crossSell1',
    yAxis: 1,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#4E79A7'
  }, {
    name: 'Renew',
    data: renew2,
    linkedTo: 'crossSell2',
    yAxis: 1,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#F28E2B'
  }, {
    name: 'Renew',
    data: renew3,
    yAxis: 1,
    linkedTo: 'crossSell3',
    dataGrouping: {
      units: groupingUnits
    },
    color: '#E15759'
  }, {
    name: 'Renew',
    data: renew4,
    linkedTo: 'crossSell4',
    yAxis: 1,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#59A14F'
  }, {
    name: 'Up Sell',
    data: upSell1,
    linkedTo: 'crossSell1',
    yAxis: 2,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#4E79A7'
  }, {
    name: 'Up Sell',
    data: upSell2,
    linkedTo: 'crossSell2',
    yAxis: 2,
    dataGrouping: {
      units: groupingUnits
    },
    color: '#F28E2B'
  }, {
    name: 'Up Sell',
    data: upSell3,
    yAxis: 2,
    linkedTo: 'crossSell3',
    dataGrouping: {
      units: groupingUnits
    },
    color: '#E15759'
  }, {
    name: 'Up Sell',
    data: upSell4,
    yAxis: 2,
    linkedTo: 'crossSell4',
    dataGrouping: {
      units: groupingUnits
    },
    color: '#59A14F'
  }]

＆＃13;
＆＃13; 
var data = [
  ['2017-01-01', 252, null, 77, null, null, null, null, 77, 219, null, null, null],
  ['2017-02-01', null, 65, null, null, 35, null, 199, 276, 210, null, null, null],
  ['2017-03-01', 247, 244, null, 50, null, 66, null, null, null, null, null, 12],
  ['2017-04-01', null, 25, 45, null, null, null, 23, 72, null, null, null, null],
  ['2017-05-01', null, null, 24, 85, null, 65, null, null, 175, null, null, 0],
  ['2017-06-01', null, 557, null, 60, null, 44, null, 274, 0, null, null, null],
  ['2017-07-01', null, null, 50, null, 35, null, 199, 280, null, null, null, null],
  ['2017-08-01', null, null, 25, null, 32, null, 199, 278, 13, null, null, null],
  ['2017-09-01', null, null, null, null, 150, 244, 199, 278, null, null, null, null],
  ['2017-10-01', null, 486, 35, null, null, null, null, null, null, null, null, null]
];

// split the data set into ohlc and volume
var crossSell1 = [],
  crossSell2 = [],
  crossSell3 = [],
  crossSell4 = [],
  renew1 = [],
  renew2 = [],
  renew3 = [],
  renew4 = [],
  upSell1 = [],
  upSell2 = [],
  upSell3 = [],
  upSell4 = [],
  dataLength = data.length,
  // set the allowed units for data grouping
  groupingUnits = [
    [
      'month', [2]
    ]
  ],
  i = 0;
for (i; i < dataLength; i += 1) {

  crossSell1.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][1],
    name: 'Category1'
  });
  crossSell2.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][2],
    name: 'Category2'
  });
  crossSell3.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][3],
    name: 'Category3'
  });
  crossSell4.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][4],
    name: 'Category4'
  });

  renew1.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][5],
    name: 'Category1'
  });
  renew2.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][6],
    name: 'Category2'
  });
  renew3.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][7],
    name: 'Category3'
  });
  renew4.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][8],
    name: 'Category4'
  });

  upSell1.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][9],
    name: 'Category1'
  });
  upSell2.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][10],
    name: 'Category2'
  });
  upSell3.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][11],
    name: 'Category3'
  });
  upSell4.push({
    x: new Date(data[i][0]).getTime(),
    y: data[i][12],
    name: 'Category4'
  });

}

// create the chart
Highcharts.stockChart('container', {
  chart: {
    type: 'column',
    marginRight: 150
  },
  rangeSelector: {
    selected: 0
  },
  legend: {
    enabled: true,
    align: 'right',
    borderWidth: 1,
    layout: 'vertical',
    verticalAlign: 'top',
    y: 100,
    labelFormatter: function() {
      return this.name;
    }
  },
  title: {
    text: 'Gross Sales'
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  yAxis: [{
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'Cross Sell'
      },
      height: '33%',
      lineWidth: 2
    }, {
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'Renew'
      },
      top: '34%',
      height: '33%',
      offset: 0,
      lineWidth: 2
    },
    {
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'Up Sell'
      },
      top: '67%',
      height: '33%',
      offset: 0,
      lineWidth: 2,
      plotOptions: {
        column: {
          stacking: 'normal'
        }
      }
    }
  ],

  tooltip: {
    split: false,
    formatter: function() {
      var date = new Date(this.x);
      return 'Category: <b>' + this.key +
        '</b><br>Date: <b>' +
        date.getFullYear() + "/" +
        (date.getMonth() + 1) + "/" +
        date.getDate() +
        '</b><br>USD: <b>$' + this.y + 'K</b>';
    }
  },

  series: [{
      name: 'Category 1',
      id: 'crossSell1',
      data: crossSell1,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#4E79A7'
    },
    {
      name: 'Category 2',
      id: 'crossSell2',
      data: crossSell2,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#F28E2B'
    },
    {
      name: 'Category 3',
      id: 'crossSell3',
      data: crossSell3,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#E15759'
    },
    {
      name: 'Category 4',
      id: 'crossSell4',
      data: crossSell4,

      dataGrouping: {
        units: groupingUnits
      },
      color: '#59A14F'
    },
    {
      name: 'Renew',
      data: renew1,
      linkedTo: 'crossSell1',
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#4E79A7'
    },
    {
      name: 'Renew',
      data: renew2,
      linkedTo: 'crossSell2',
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#F28E2B'
    },
    {
      name: 'Renew',
      data: renew3,
      yAxis: 1,
      linkedTo: 'crossSell3',
      dataGrouping: {
        units: groupingUnits
      },
      color: '#E15759'
    },
    {
      name: 'Renew',
      data: renew4,
      linkedTo: 'crossSell4',
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#59A14F'
    },
    {
      name: 'Up Sell',
      data: upSell1,
      linkedTo: 'crossSell1',
      yAxis: 2,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#4E79A7'
    },
    {
      name: 'Up Sell',
      data: upSell2,
      linkedTo: 'crossSell2',
      yAxis: 2,
      dataGrouping: {
        units: groupingUnits
      },
      color: '#F28E2B'
    },
    {
      name: 'Up Sell',
      data: upSell3,
      yAxis: 2,
      linkedTo: 'crossSell3',
      dataGrouping: {
        units: groupingUnits
      },
      color: '#E15759'
    },
    {
      name: 'Up Sell',
      data: upSell4,
      yAxis: 2,
      linkedTo: 'crossSell4',
      dataGrouping: {
        units: groupingUnits
      },
      color: '#59A14F'
    }
  ]
});
＆＃13; 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>
＆＃13;
＆＃13;
＆＃13;

Fiddle演示

相关问题
最新问题