堆积柱形图,具有不规则的日期时间间隔

时间:2016-02-25 11:54:29

标签: javascript highcharts

我的堆积柱形图在x轴上具有不规则的日期时间。日期时间间隔可以是任何时间间隔。基本上我们的爬虫从不同的api定期插入数据,但有些情况下它会在某些日期失败。所以日期时间大多是不规则的。

看看下面的例子。

enter image description here

  • 我需要删除自动添加的点 高图。
  • 我需要在x轴上放置确切的日期。
  • 我需要 x轴与列对齐。目前x轴上的日期是 未对齐。



$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
            renderTo: 'container',
        plotBorderWidth: 1,
        type: "column",
    },
    title: {
        text: ""
    },
    xAxis: {
        type: "datetime",
        tickLength: 0,        
    },
    yAxis: {
        min: 0,
        title: {
            text: "Keywords"
        },
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: "bold",
                color: "gray"
            }
        },
        opposite: false
    },
    legend: {
        backgroundColor: "white",
        borderColor: "#CCC",
        borderWidth: 0,
        shadow: false
    },
     plotOptions: {
            column: {
                stacking: 'normal'
            },            
        },
    series: [{
        name: "Ranked on Page 3",
        data: [{
            y: 2,
            x: 1449532800000,
            pointDate: 1449532800000
        }, {
            y: 4,
            x: 1450137600000,
            pointDate: 1450137600000
        }, {
            y: 3,
            x: 1450742400000,
            pointDate: 1450742400000
        }, {
            y: 3,
            x: 1451347200000,
            pointDate: 1451347200000
        }, {
            y: 2,
            x: 1454025600000,
            pointDate: 1454025600000
        }],
        maxPointWidth: 100
    }, {
        name: "Ranked on Page 2",
        data: [{
            y: 1,
            x: 1449532800000,
            pointDate: 1449532800000
        }],
        maxPointWidth: 100
    }, {
        name: "Ranked on Page 1",
        data: [{
            y: 2,
            x: 1454025600000,
            pointDate: 1454025600000
        }],
        maxPointWidth: 100
    }],
    colors: ["#6662AC", "#57B3C8", "#F7971E"]
        });
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
&#13;
&#13;
&#13;

使用实际数据和输出:JsFiddle

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

这可以通过Highstock使用:

来实现
xAxis.ordinal = true

检查此答案:Highcharts - Column chart with empty columns for date in x-axis