将另一个系列添加到行高图表

Add another series to row Highcharts

本文关键字：高图表 添加 个系列      更新时间：2023-09-26

我正在尝试在此Highcharts示例中的行中添加另一个系列。

http://jsfiddle.net/norcalknockout/9xg3agc1/16/

我尝试添加另一个任务对象，但这只会创建另一行。

我想在类别 1 行中有多个系列。

谢谢。

指向 jsfiddle.net 的链接必须附带代码。 

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 500px"></div>

您可以修改当前逻辑，请参阅现场演示：http://jsfiddle.net/9xg3agc1/19/

并解释：

  1. 向每个任务添加categoryIndex 。如果要将第一个类别（表示 y=0）与 n 系列一起使用，请计算每个系列的差值。具有 value = X 的类别使用 y 值范围呈现：X - 0.5 到 X + 0.5 。例如，如果类别索引等于 0，并且您希望显示三个系列，则这些任务的categoryIndex可以是 -0.33 、 0 和 +0.33 。对于两个类别，您可以使用-0.25和0.25（如演示中所示）。

  2. 更改y值应用于点的方式。现在y值与tasks数组中的任务索引相同。所以，应该有来自categoryIndex的价值，像这样： 

    y: task.categoryIndex,

和代码示例：

// Define tasks
var tasks = [{
    categoryIndex: -0.25,
  name: 'Category 1',
  intervals: [{
    from: Date.UTC(2011, 05, 16),
    to: Date.UTC(2012, 03, 21)
  }, {
    from: Date.UTC(2013, 07, 09),
    to: Date.UTC(2015, 05, 22)
  }]
}, {
    categoryIndex: 0.25,
  name: 'Category 2',
  intervals: [{
    from: Date.UTC(2011, 05, 16),
    to: Date.UTC(2012, 03, 21)
  }, {
    from: Date.UTC(2013, 07, 09),
    to: Date.UTC(2015, 05, 22)
  }]
}];

逻辑变化：

    item.data.push({
      x: interval.from,
      y: task.categoryIndex, // use pre-calculated index
      label: interval.label,
      from: interval.from,
      to: interval.to
    }, {
      x: interval.to,
      y: task.categoryIndex, // use pre-calculated index
      from: interval.from,
      to: interval.to
    });
相关文章：