Splines with Grouped Columns highcharts

问题:

Is there a way to combine Splines with Grouped Columns in HighCharts?

Here is what I have.

1. 4 Categories on X- Axis
2. Each category has 3 columns
3. In effect, I will have 4 groups with each group showing 3 columns each
4. Now, on secondary Y-Axis, I want to draw a Spline that cuts across all 3 columns across all Four groups.

Moreover, I would like the Spline point to be centered on each on respective column..

http://jsfiddle.net/3SjWT/8/

Is this even possible?

Thanks in Advance!

Code:

$(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'
            }
        }

        ]
    });
});

回答1:

3 things:

1) You can get something like this by adding a second x axis for the spline series, adding a category for each column, and playing with your groupPadding on the column series in order to get things aligned properly

example:

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

2) using a dual y axis chart for two completely different measures like this is a really bad idea. It is a very common mistake, but a mistake nonetheless.

Setting the chart up this way forces the viewer to make comparisons that are not real, by overlaying data of different scales, and thereby displaying interactions between the data sets that don't actually exist. (ie, the profits appear to be "less than" the sales for the black category in the North, and exceed sales in the East for the Fashion cetegory. this is, of course, not anything real, but the viewer is left with that impression subconsciously).

3) perhaps more importantly, the profit data should not be displayed with a line chart at all. A line chart is used to show a pattern of change over time. Using a line to connect discrete categorical data again gives a false impression - that the pattern of the line is meaningful to the data.
But it's not a meaningful pattern at all, as it is only connecting discrete categorical data points, which can be arbitrarily re-ordered.

The better way to display this data would be with two column charts, one above the other. One chart showing sales data, the other showing profit data.

Many people are often afraid to use multiple charts, feeling that somehow a single chart is the ideal, but in reality multiple charts are very often the better option.

(example: http://jsfiddle.net/jlbriggs/3SjWT/16/ )

FWIW.

回答2:

The points given by jlbriggs are valid but there are times when its the one really needed. I have created a Highcharts plugin to solve this one using the following criteria:

1. Spline point should be centered on each respective column (DONE)
2. Spline points aligned to each respective column should also hide or show when that column becomes hidden or shown. (50% Done - Only hide is properly implemented)
3. Everything should be dynamic if possible.
4. Preserve the Highcharts default layout with the groupPadding included (not modified).
5. Allow for stacking of columns too

Its still not done but you may want to refer how I built the plugin. I still have some "To Do" that I need to fix though

Link: highcharts-plugin-splines-with-grouped-columns