Question

有没有办法将Splines与HighCharts中的Grouped Columns结合使用？

这就是我所拥有的。

X轴上的4个类别
每个类别有3列
实际上，我将有4个小组，每个小组每个小组显示3列
现在，在辅助Y轴上，我想绘制一个样条线，它跨越所有四个组的所有3列。

此外，我希望Spline点在各自列的中心位置。

这甚至可能吗？

提前致谢！

代码：

$(function () {
    $('#container').highcharts({
        chart: {},
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: ['North', 'East', 'West', 'South'],
            gridLineWidth: 0
        },

        yAxis: [{ // Primary yAxis
            gridLineWidth: 0,
            labels: {

                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Sales',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Profit %',
                style: {
                    color: Highcharts.getOptions().colors[3]
                }
            },
            labels: {

                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],


        tooltip: {
            formatter: function () {
                var s;
                if (this.point.name) { // the pie chart
                    s = '' + this.point.name + ': ' + this.y;
                } else {
                    s = '' + this.x + ': ' + this.y;
                }
                return s;
            }
        },
        labels: {
            items: [{
                html: '',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Black',
            data: [136, 123, 147, 133]
        }, {
            type: 'column',
            name: 'BW Print',
            data: [213, 187, 226, 200]
        }, {
            type: 'column',
            name: 'Fashion',
            data: [213, 187, 226, 200]
        },

        {
            type: 'spline',
            name: 'Profit %',
            yAxis: 1,
            data: [20, 30, 40],
            /* Profit % for Black, BW Print and Fashion
            For North, ->   20, 30, 40 % 
            For East ->     35, 45, 55% 
            For West ->     45, 35, 50% 
            Four South ->   33, 42, 55% 
            */
            color: '#CD0000',
            marker: {
                lineWidth: 1,
                lineColor: '#CD0000',
                fillColor: '#CD0000'
            }
        }

        ]
    });
});

Answer 1

3件事：

1）您可以通过为样条线系列添加第二个x轴，为每个列添加一个类别，并在列系列上使用groupPadding来获取内容正确对齐

example:

http://jsfiddle.net/jlbriggs/3SjWT/11/

2）使用双y轴图表来完成两个完全不同的测量，这是真的坏主意。这是一个非常常见的错误，但仍然是一个错误。

以这种方式设置图表会强制查看者通过覆盖不同比例的数据进行不真实的比较，从而显示实际不存在的数据集之间的交互。（即，利润似乎“低于”北方黑色类别的销售额，并且超过了东方时尚产品的销售额。当然，这不是真实的，但观众留下的是下意识的印象）。

3）或许更重要的是，利润数据根本不应与折线图一起显示。折线图用于显示随时间变化的模式。使用线路再次连接离散的分类数据会给人一种错觉 - 线条的模式对数据有意义但它根本不是一个有意义的模式，因为它只连接离散的分类数据点，可以任意重新排序。

显示此数据的更好方法是使用两个柱形图，一个在另一个之上。一个图表显示销售数据，另一个图表显示利润数据。

许多人经常害怕使用多个图表，觉得单个图表是理想的，但实际上多个图表通常是更好的选择。

（示例： http://jsfiddle.net/jlbriggs/3SjWT/16/ ）

FWIW。

Answer 2

jlbriggs给出的分数是有效的，但有时真的需要它。我已经使用以下标准创建了一个Highcharts插件来解决这个问题：

样条点应位于每个相应列（DONE）的中心
对齐每个相应列的样条点也应隐藏或显示该列何时隐藏或显示。（50％完成 - 仅隐藏正确实施）
如果可能，一切都应该是动态的。
保留包含groupPadding（未修改）的Highcharts默认布局。
允许堆叠列

它还没有完成，但您可能想参考我如何构建插件。我还有一些＆＃34;待办事项＆＃34;我需要解决的问题

链接：highcharts-plugin-splines-with-grouped-columns

带有分组列的样条曲线高图

2 个答案: