Highstock显示没有数据的日期

时间:2016-02-04 16:03:27

标签: javascript highcharts

我正在使用Highstock,但不应该使用它,我更多地使用它作为highcharts加上导航器功能

http://jsfiddle.net/ygyx5r9r/

 $(function () {
        $('#container').highcharts('StockChart',{
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                'type': 'datetime',
                        'title': {
                            'text': 'Time'
                        }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [[Date.UTC(2013,5,2),0.7695],
    [Date.UTC(2013,5,3),0.7648],
    [Date.UTC(2013,5,4),0.7645],
    [Date.UTC(2013,5,5),0.7638],
    [Date.UTC(2013,5,6),0.7549],
    [Date.UTC(2013,5,7),0.7562],
    [Date.UTC(2013,5,9),0.7574],
    [Date.UTC(2013,5,10),0.7543],
    [Date.UTC(2013,5,11),0.7510],
    [Date.UTC(2013,5,12),0.7498],
    [Date.UTC(2013,5,13),0.7477],
    [Date.UTC(2013,5,14),0.7492]]

            }, ]
        });
    });

正如我在jsfiddle中所揭示的那样,你可以看到6月6日和9日之间没有数据,而且我的高价图表中没有显示的是他们无论如何都要保留没有数据作为高位图的日期?我正在使用它进行诊断,但我喜欢导航仪,我发现它非常方便。

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:1)

Highstock的xAxis默认为ordinal - 这意味着不会显示空格。要解决您的问题,您可以为ordinalfalse设置为xAxis

...
xAxis: {
  ordinal: false,
...

示例:http://jsfiddle.net/mxtv0ztc/