Highstock Column Chart - data grouping causes data to scroll independently of axis

问题

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).

For example: when scrolling one "step" to the right, I note these differences:

The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)

What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.

I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.

(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)

chart: {
    alignTicks: false,
    backgroundColor: '#eeeeee',
    events: {
        load: function (e) {
            this.xAxis[0].setExtremes(1390943153305, 1400015153305);
        }
    },
    ignoreHiddenSeries: true,
    renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
    enabled: true,
    shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
    height: 40,
    xAxis: {
        gridLineWidth: 1
    },
    series: {type: 'column'}
},
plotOptions: {
    series: {
        showInLegend: true,
        stacking: 'normal',
        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
                ['second', [604800]],
                ['minute', [10080]],
                ['hour', [168]],
                ['day', [7]],
                ['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
                ['month', null],
                ['year', null]
            ]
        }
    }
},
xAxis: {ordinal: false},
series: data

回答1:

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/

I think that resolves your issue, right?

        plotOptions: {
            series: {
                showInLegend: true,
                stacking: 'normal',
                dataGrouping: {
                    enabled: true,
                    forced: true,
                    units: [ [ 'week', [1] ]]
                }
            }
        },

Regarding additional question: - yes you can set specific color for each point, but you need to determine on your own what color should be set:

data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]

Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).

来源：https://stackoverflow.com/questions/21740313/highstock-column-chart-data-grouping-causes-data-to-scroll-independently-of-ax

标签

javascript

highstock