1

当图表应包含具有以下视觉呈现的类型时，实现具有多种类型的图表的最佳方法是什么。

| yellow   |blue|     gray      |  yellow |   gray   |

即一维类型（但视觉上有高度），颜色表示“y”（这里由类别组成：黄色、蓝色、灰色）

您还应该能够堆叠这些：

| radical         | senseless |         high tension |
| yellow   |blue|     gray      |  yellow |   gray   |

我可以通过一个图表类型的列来实现这一点，其中每个类别都有一个系列：

http://jsfiddle.net/RCnYV/

但是我怎样才能在上面添加另一种图表类型，例如：

yAxis (only for the line)
^                                                      ___
|-------            ___________________________   ____/
|       \__________/                           \/
|     radical         | senseless |         high tension |
|     yellow   |blue|     gray      |  yellow |   gray   |
-----------------------------------------------------------> xAxis (shared)

所以线系列应该高于（而不是悬停在）其他系列。请注意，xAxis 在所有系列之间共享，即所有系列都具有完全相同的数据点。只是有些系列以“line”类型呈现，而另一些则以新类型呈现（我不知道它的好名字，ribbon？）。

还有什么其他方法可以创建类似的图表？上面的一个问题是我需要为每个目录创建一个系列，即总共 2 * 系列，而不是像基本图表那样只有两个。

4

1 回答 1

3

您是否正在寻找类似@ http://jsfiddle.net/jugal/cABfL/的东西？height您可以通过为您的 yAxis指定 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 ://www.highcharts.com/stock/demo/candlestick-and-volume

编辑
回答问题的第二部分(Also what other ways are there to create a similar chart?)。highchart 似乎没有为这种可视化带来任何开箱即用的东西，因此您需要自己围绕现有的行和列来获得这种可视化。

我就是这样做的。
我尝试为每个功能区使用堆叠条形图，因此需要 2 个系列，1 个用于线条，1 个用于两个功能区。但是在尝试之后，结果条形图只不过是一个旋转的柱形图（至少是一种），它似乎将垂直轴作为 X，水平轴作为 Y，因此它搞砸了任何其他图表，即折线图被弄乱了，因为它希望水平线是 X。

基本上使用条形图并没有让我走得太远。我继续使用折线图（用很粗的线lineWidth:50) 并为功能区的每个部分绘制了一个水平（每个点的 Y 常数）折线图，其中包含一个系列，因此能够为每个部分赋予不同的颜色。每个色带都需要一个单独的 Y 轴，如上所述具有不同的偏移量。还删除了所有工具提示、Y 轴标签和网格线，使其看起来与折线图不同，更像是功能区。可能需要工具提示，但折线图提供了点的工具提示，在我们的例子中，我们想要两点之间的部分的工具提示，因此编写了一个 mouseOver 事件处理程序并计算了那里的部分的长度。现在唯一受到伤害的部分是为功能区的每个部分创建一个系列，因此继续编写以下实用函数来接受值列表，

    // 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;
    }

所需要的只是将这些系列推入现有系列，然后将其提供给 highchart 构造函数。

最终的 jsFiddle：http: //jsfiddle.net/jugal/cABfL/

于 2012-08-29T13:24:34.690 回答