HighCharts,柱状图重叠问题。如果在不同时间x轴上的相同日期,那么我的柱形图中也会出现重叠列

时间:2017-02-08 04:56:35

标签: javascript highcharts

我正在使用Highcharts api绘制柱形图,

y轴使用整数和x轴时间表。

如果x轴上的数据具有相同的日期但是时间不同,则列重叠,但鼠标悬停时会识别出绘制了两个点。

但实际上我想看到没有重叠的列。

这里我有drawMychart.js

function draw(jsonData, start_date, end_date) {
chart = new Highcharts.Chart({

        chart : {
            type : 'column',
            renderTo : 'content',
            plotBorderWidth : 1,
        },

        legend : {
            enabled : false
        },

        title : {
            text : 'My Chart Updates'
        },

        xAxis : {
            type : "datetime",
            //tickInterval : 3600 * 1000, // 1 hours

            min : start_date, // X axis minimum days data start , for now only
            // 2 days
            max : end_date, // X axis maximum limit for date , current date
            startOnTick : true,
            endOnTick : true,

            title : {
                text : 'Time Intervals of Executed Job'
            },
        // labels: {
        // format: '{value}'
        // },

        },

        // yAxis : {
        //  title : {
        //      text : ''
        //  },
        //  labels : {
        //      enabled : false
        //
        //  },
        //  maxPadding : 0.03,
        // },

        tooltip : {

            formatter : function() {
                var date = new Date(this.point.x);
                return "Job Run Time :" + date.toString() + '<br/> '
                        + "Task Id: " + this.point.taskId + '<br/> '
                        + "Compaingn Count:" + this.point.y;
            },

        // ToDo , will check If its possible to use the <table> within formatter

        // useHTML: true,
        // headerFormat: '<table>',
        // pointFormat:
        // // '<tr><th>Job Run time :</th><td> {point.x}</td></tr>' +
        // '<tr><th>Task Id:</th><td>{point.taskId}</td></tr>' +
        // '<tr><th>Compaingn Id:</th><td>{point.compId}</td></tr>' +
        // '<tr><th>Compaign count:</th><td>{point.y}</td></tr>',
        // footerFormat: '</table>',
        // followPointer: true
        },

        // plotOptions : {
        //  bubble : {
        //      minSize : 10,
        //      maxSize : 15,
        //  },
        //  series : {
        //      dataLabels : {
        //          enabled : true,
        //          format : '{point.y}'
        //      }
        //  }
        // },
        plotOptions: {
             column: {
                 pointWidth : 10
             }
         },
        series : [ {
            data : jsonData,
            color : "green",
             pointWidth: 28
        } ]
    });

请参阅此小提琴链接

在这个小提琴链接中,我有两个数据点的图表,在相同的x轴但不同的y轴上。 https://jsfiddle.net/shrwn1a6/2/

enter image description here

在上面的屏幕截图中,请看重叠的列。

帮助真的很感激。

0 个答案:

没有答案