Highcharts - Column chart with empty columns for date in x-axis

问题

Is there any way to have a column or line chart which doesn't render empty column if I'm using the datetime type? Because I want to display the last 7 days without the weekends, but this doesn't seems to be possible.

Example: http://jsfiddle.net/G5S9L/7/

Expected: don't display June 17th/18th

The second thing I tried was to use the category type. In this case the chart is just rendering these columns which are specified in the series data. But my chart consists of multiple series and each series will hava some gaps. Highchart doesn't match the category names and puts all y values after each other.

Exmaple: http://jsfiddle.net/G5S9L/6/

Expected: Thursday has 2 columns/bars as well as Monday

These samples are very simplified. I know I could generate a master list with all values of the x-axis and order each series according to the master list and fill the gaps with NULL values. But this a heavy overhead in generating data for my statistics. Because not all series have the same sources to determine the range of the x-axis.

回答1:

With Highcharts? There's not simple way to achieve that.

However, using Highstock, simply use xAxis.ordinal = true and everything will work. See: http://jsfiddle.net/G5S9L/8/

回答2:

For the second question, you can simply extend the Point class(wrap applyOptions method), and set the categories of xAxis.

(function (H) {
    H.wrap(H.Point.prototype, 'applyOptions', function (applyOptions, options, x) {
        var point = applyOptions.call(this, options, x),
            series = point.series;

        // check if 
        // 1. there is a name(category)
        // 2. xAxis has the categories defined
        // 3. x value equals xIncrement
        if (point.name && series.xAxis.categories && point.x === series.xIncrement - 1) {

            // find a matching category?
            var idx = series.xAxis.categories.indexOf(point.name);
            if (idx >= 0) {
                point.x = idx;
            }
        }

        return point;
    });

})(Highcharts);

See fiddle: http://jsfiddle.net/G5S9L/17/

来源：https://stackoverflow.com/questions/23830955/highcharts-column-chart-with-empty-columns-for-date-in-x-axis

标签

javascript

Highcharts