CanvasChartJS:如何避免自动时间间隔

时间:2015-10-02 07:20:09

标签: javascript charts canvasjs

我使用Canvas柱形图,时间在X轴上。

当我更新时间表时,它显示了图表中的常规时间间隔,但当时没有数据。

这导致图表中的空位区域和最右端的点。

var liveData=[
    {x:new Date( "Fri Jan 01 1960 " + "10:30:00" + " GMT+0530 (IST)"),
    y: 20},
    {x:new Date( "Fri Jan 01 1960 " + "10:35:00" + " GMT+0530 (IST)"),
    y: 20},
    {x:new Date( "Fri Jan 01 1960 " + "10:40:00" + " GMT+0530 (IST)"),
    y: 20},
     {x:new Date( "Fri Jan 01 1960 " + "11:40:00" + " GMT+0530 (IST)"),
    y: 20}
]

var chart = new CanvasJS.Chart("chartContainer", {
                        width: 820,
                        hieght: 200,
                        title: {
                            text: "Live"
                        },
                        axisX: {
                            valueFormatString: "HH:mm:ss",
                            title: "Time",
                            gridColor: "white",
                            gridThickness: 0,
                            labelFontSize: 13
                        },
                        axisY: {
                            title: "Units"
                        },
                        dataPointMaxWidth: 20,
                        data: [{
                                //                            color: "#B0D0B0",
                                toolTipContent: "Time: {x} <br> Opens: <strong>{y} </strong>",
                                color: "#452323",
                                type: "column",
                                dataPoints: liveData
                            },
                        ]
                    });

chart.render();     http://jsfiddle.net/1ekxfh2w/

我希望只看到数据的时间。我怎么能实现这个?

或任何其他可以帮我完成工作的图表?

1 个答案:

答案 0 :(得分:0)

更改x--> label,它将解决您的问题。请检查此Fiddle