当应该包含具有以下类型的视觉呈现的类型时，实现具有多种类型的图表的最佳方式是什么。
| yellow |blue| gray | yellow | gray |
即。一维的类型（但在视觉上有高度），颜色表示'y'（这里包括类别：黄色，蓝色，灰色）
您还应该能够堆叠：
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
我可以通过为每个类别添加一个包含系列的图表类型列来实现此目的：
但我怎样才能在上面添加另一种图表类型，例如：
yAxis (only for the line)
^ ___
|------- ___________________________ ____/
| \__________/ \/
| radical | senseless | high tension |
| yellow |blue| gray | yellow | gray |
-----------------------------------------------------------> xAxis (shared)
因此，系列应该在其他系列之上（而不是悬停）。请注意，xAxis在所有系列之间共享，即所有系列都具有完全相同的数据点。只是有些系列被呈现为'line'类型，而其他系列有新类型（我不知道好名字，带？）。
还有其他方法可以创建类似的图表吗？上面的一个问题是我需要为每个目录创建一个系列，总共是2 *系列，而不是像基本图表那样只有两个。
答案 0 :(得分：3)
你在找{@ 3}这样的东西吗？
您可以通过为yAxis指定height s并对其top进行操作以便将其叠加在另一个上来堆叠图表
yAxis: [{
top: 300,
lineWidth: 2,
offset: 0,
height: 200,
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ": " + $wnd.Highcharts.numberFormat(this.y, 2);
}
}
},
{
height: 200,
lineWidth: 2,
offset: 0,
tooltip: {
enabled: true,
formatter: function() {
return this.value + 50;
}
}
}],
@ http://jsfiddle.net/jugal/cABfL/
提供了类似的堆叠示例 修改
回答问题的第二部分(Also what other ways are there to create a similar chart?)。没有任何开箱即用的高级图表似乎带来了这种可视化的表格，所以你需要围绕现有的线条和列工作以获得这种可视化。
这就是我如何去做的 我尝试为每个色带使用http://www.highcharts.com/stock/demo/candlestick-and-volume，因此需要2个系列，1个用于线，1个用于两个色带。但经过试一试后，条形图只是一个旋转的柱形图（至少是一种），它似乎有垂直轴为X而水平方向为Y，因此它会弄乱任何其他图表，即折线图变得混乱，因为它希望水平线为X.
基本上使用条形图并没有让我走得太远。我继续使用折线图（使用非常粗的线lineWidth:50）并绘制一个水平线（每个点的常数Y）线图，每个线段的一个系列，因此能够给每个部分不同颜色。每个色带需要一个单独的Y轴，如上所述具有不同的偏移。还删除了所有工具提示，Y轴标签和网格线，使其看起来与折线图不同，更像是功能区。可能需要工具提示，但折线图提供了点的工具提示，在我们的例子中，我们希望在两点之间的部分上有工具提示，因此编写了一个mouseOver事件处理程序并计算了那里的部分长度。现在唯一受伤的部分是为功能区的每个部分创建一个系列，所以继续编写以下实用程序函数，接受一个值列表，基本上是每个部分的x截距（你可以即兴表示它取部分长度相反）并返回一个系列数组。
// usage: createSeries([0, 3, 4, 6], 1)
// Creates 4 series and assigns them all to yAxis 1
// you can extend this to take colors etc too, as per requirement
function createSeries(data, yAxisIndex) {
var i;
var series = [];
for (i = 0; i < data.length - 1; i++) { // Node lenghth-1
var start = data[i];
var end = data[i + 1];
series.push({
yAxis: yAxisIndex,
animation: false,
stack: 0,
data: [[start, 0], [end, 0]],
lineWidth: 50,
marker: {
enabled: false
},
tooltip: {
pointFormat: function() {
return "";
}
},
events: {
mouseOver: function() {
alert(this.data[1].x - this.data[0].x);
}
},
showInLegend: false
});
}
return series;
}
所需要的只是将这些系列推入现有系列，然后将其提供给高图构造函数。
最终的jsFiddle： stacked bar chart