如何在画布js图表中在x轴上绘制时间？

时间：2016-03-28 07:18:16

标签： javascript datetime charts

我有一个日期时间格式的值。我想在x轴上显示时间而不是日期。

  

{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：41＆＃34;＆＃34;值＆＃34;：＆＃34; 41.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：43＆＃34;＆＃34;值＆＃34;：＆＃34; 43.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：45＆＃34;＆＃34;值＆＃34;：＆＃34; 45.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：47＆＃34;＆＃34;值＆＃34;：＆＃34; 47.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：49＆＃34;＆＃34;值＆＃34;：＆＃34; 49.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：51＆＃34;＆＃34;值＆＃34;：＆＃34; 51.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：53＆＃34;＆＃34;值＆＃34;：＆＃34; 53.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：55＆＃34;＆＃34;值＆＃34;：＆＃34; 55.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：57＆＃34;＆＃34;值＆＃34;：＆＃34; 57.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：09：59＆＃34;＆＃34;值＆＃34;：＆＃34; 59.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：01＆＃34;＆＃34;值＆＃34;：＆＃34; 1.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：03＆＃34;＆＃34;值＆＃34;：＆＃34; 3.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：05＆＃34;＆＃34;值＆＃34;：＆＃34; 5.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：07＆＃34;＆＃34;值＆＃34;：＆＃34; 7.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：09＆＃34;＆＃34;值＆＃34;：＆＃34; 9.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：11＆＃34;＆＃34;值＆＃34;：＆＃34; 11.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：13＆＃34;＆＃34;值＆＃34;：＆＃34; 13.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：15＆＃34;＆＃34;值＆＃34;：＆＃34; 15.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：17＆＃34;＆＃34;值＆＃34;：＆＃34; 17.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：19＆＃34;＆＃34;值＆＃34;：＆＃34; 19.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：21＆＃34;＆＃34;值＆＃34;：＆＃34; 21.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：23＆＃34;＆＃34;值＆＃34;：＆＃34; 23.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：25＆＃34;＆＃34;值＆＃34;：＆＃34; 25.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：27＆＃34;＆＃34;值＆＃34;：＆＃34; 27.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：29＆＃34;＆＃34;值＆＃34;：＆＃34; 29.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：3​​1＆＃34;＆＃34;值＆＃34;：＆＃34; 31.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：3​​3＆＃34;＆＃34;值＆＃34;：＆＃34; 33.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：3​​5＆＃34;＆＃34;值＆＃34;：＆＃34; 35.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：3​​7＆＃34;＆＃34;值＆＃34;：＆＃34; 37.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：3​​9＆＃34;＆＃34;值＆＃34;：＆＃34; 39.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：41＆＃34;＆＃34;值＆＃34;：＆＃34; 41.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：43＆＃34;＆＃34;值＆＃34;：＆＃34; 43.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：45＆＃34;＆＃34;值＆＃34;：＆＃34; 45.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：47＆＃34;＆＃34;值＆＃34;：＆＃34; 47.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：49＆＃34;＆＃34;值＆＃34;：＆＃34; 49.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：51＆＃34;＆＃34;值＆＃34;：＆＃34; 51.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：53＆＃34;＆＃34;值＆＃34;：＆＃34; 53.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：55＆＃34;＆＃34;值＆＃34;：＆＃34; 55.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：57＆＃34;＆＃34;值＆＃34;：＆＃34; 57.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：10：59＆＃34;＆＃34;值＆＃34;：＆＃34; 59.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：01＆＃34;＆＃34;值＆＃34;：＆＃34; 1.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：03＆＃34;＆＃34;值＆＃34;：＆＃34; 3.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：05＆＃34;＆＃34;值＆＃34;：＆＃34; 5.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：07＆＃34;＆＃34;值＆＃34;：＆＃34; 7.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：09＆＃34;＆＃34;值＆＃34;：＆＃34; 9.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：11＆＃34;＆＃34;值＆＃34;：＆＃34; 11.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：13＆＃34;＆＃34;值＆＃34;：＆＃34; 13.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：15＆＃34;＆＃34;值＆＃34;：＆＃34; 15.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：17＆＃34;＆＃34;值＆＃34;：＆＃34; 17.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：19＆＃34;＆＃34;值＆＃34;：＆＃34; 19.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：21＆＃34;＆＃34;值＆＃34;：＆＃34; 21.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：23＆＃34;＆＃34;值＆＃34;：＆＃34; 23.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：25＆＃34;＆＃34;值＆＃34;：＆＃34; 25.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：27＆＃34;＆＃34;值＆＃34;：＆＃34; 27.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：29＆＃34;＆＃34;值＆＃34;：＆＃34; 29.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：31＆＃34;＆＃34;值＆＃34;：＆＃34; 31.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：33＆＃34;＆＃34;值＆＃34;：＆＃34; 33.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：35＆＃34;＆＃34;值＆＃34;：＆＃34; 35.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：37＆＃34;＆＃34;值＆＃34;：＆＃34; 37.0＆＃34;}，{＆＃34;日期时间＆＃34;：＆＃34; 2016年3月16日   07：11：39＆＃34;＆＃34;值＆＃34;：＆＃34; 39.0＆＃34;}

目前我正在使用canvas js chart。

 <script src="/public/javascript/canvasjs.min.js" type="text/javascript"></script>

<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
        title: {
            text: "Date Time Formatting"               
        },
        axisX:{      
            valueFormatString: "hh:mm:ss" ,
            labelAngle: -50
        },
        axisY: {
          valueFormatString: "#,###"
      },

      data: [
      {        
        type: "area",
        color: "rgba(0,75,141,0.7)",
        dataPoints: [

        { x: new Date(07,11,35), y: 0},       
        { x: new Date(07,11,29), y: 20 }, 
        { x: new Date(07,10,53), y: 30 }, 
        { x: new Date(07,10,31), y: 10}

        ]
    }

    ]
});

chart.render();
}
</script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

它的节目只有12.00：00。请帮助我如何在x轴上显示时间

0 个答案:

没有答案
相关问题
最新问题