Highcharts - 条形图堆叠 - 带日期/时间线

时间:2015-04-13 11:30:19

标签: javascript jquery highcharts

我正在使用一些条形图,我在图表底部添加日期/时间线时遇到问题。

我想要的是:

enter image description here

我可以创建条形图,但我无法让日期/时间工作..

有关我如何做的任何建议?

我通常会在条形图中显示24小时

我已查看下面的功能,但无法使其正常工作..

  • pointStart
  • pointInterval
  • 类型:'datetime'(yAxis)

This is what I have now (JsFiddle)

我的Javascript代码:

    $(function () {
    Highcharts.setOptions({
        global: {
            useUTC: true
        }
    });
    $('#chart1').highcharts({
        chart: {
            type: 'bar',
            animation: false
        },
        credits: { enabled: false },
        exporting: { enabled: false },
        title: {
            text: null
        },
        xAxis: {
            categories: [ '' ]
        },
        yAxis: {
            min: 0,
            ceiling: 86400, // one day (3600*24)
            title: {text: null }

        },
        legend: {
            enabled: false,
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                animation: false
            },
            bar: {
                animation: false,
                borderWidth:0
            }
        },
        series: [
                { name: 'TODO'
                , color: 'Yellow' 
                , data: [ 7200 ] }, // Two hours
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Yellow'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },                
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },
                { name: 'TODO'
                , color: 'Yellow'
                , data: [ 7200 ] },    
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },  
                { name: 'TODO'
                , color: 'Red'
                , data: [ 7200 ] },                  
        ]
    });
});

HTML代码

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="chart1" style="width: 100%; height: 250px; margin: 0 auto"></div>

0 个答案:

没有答案