Canvas JS 图表渲染问题答案

【问题标题】：Canvas JS chart render issuesCanvas JS 图表渲染问题
【发布时间】：2017-08-30 14:54:19
【问题描述】：

我正在 Canvas JS 中实现范围条形图。 X 轴是天间隔，y 轴是时间小时。我希望有几个小时之间的 y 值范围。下面是我的代码，问题是我的图表没有呈现。

加载需要很长时间，不加载就会崩溃。仅当我为我的 y 值范围使用新的日期值时，才会发生这种情况。这里有人知道为什么它不加载吗？我怎样才能拥有有效的 y 轴小时间隔的范围条形图？

任何帮助将不胜感激。这是我在 jsfiddle 中的代码： https://jsfiddle.net/syedrh/3kpn5hk1/

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/topnav.css" rel="stylesheet">
<script type="text/javascript">
window.onload = function () {

var minimum = new Date(2017,08,21,0,20);
var maximum = new Date(2017,08,21,24,20);

debugger;
var from = new Date(2017,08,21,0,20);
var to = new Date(2017,08,21,5,20);

var chart = new CanvasJS.Chart("chartContainer",
{
    exportEnabled: true,
    axisY: {
        gridThickness: 0,
        interval:1,
        //lineThickness:0,
        title: "",
        //tickLength: 0,
        //margin:0,
        valueFormatString:" ",
        //tickLength:0,
        margin:0,
        interval: 1,
        intervalType: "hour",
        valueFormatString: "hh:mm tt",
        labelAngle: 0,
        labelFontSize:10,
        minimum: minimum,
        maximum: maximum
    },     
    axisX2: {
        indexLabelFontSize: 1,
        labelFontSize:14,
        labelFontWeight:"bold",
        labelAngle:0,
    },
    data: [ 
    {   axisXType: "secondary", 
        indexLabelFontSize: 12,
        indexLabel: "{y[#index]}",
        type: "rangeColumn",
        bevelEnabled: true,
        dataPoints: [   // Y: [Low, High]
            {x: 1, label:"Mon", y: [from,to]},
            {x:  2, label:"Tues", y:[from,to]},
            {x:  3, label:"Wed", y:[from,to]},
            {x:  4, label:"Thurs", y:[from,to]},
            {x:  5, label:"Fri", y:[from,to]},
            {x:  6, label:"Sat", y:[from,to]},
            {x:  7, label:"Sun", y:[from,to]}
        ] 
    }
    ]
});
chart.render();
}
</script>
<script type="text/javascript" 
 src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 </head>
  <body>
  <div id="chartContainer" style="height: 500px; width: 400px;overflow-x: 
   scroll;margin-top:4px;"></div>
   </body>

【问题讨论】：

标签： javascript jquery html charts canvasjs

【解决方案1】：

赛义德，

到目前为止，CanvasJS 中不提供对 y 轴的日期时间支持。但作为一种解决方法，可以在 y 轴上使用日期时间。

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title: {
    text: "How long an event occurred for on a given day"
  },
  axisY: {
    minimum: (new Date(2016, 0, 28, 11, 30)).getTime(),            
    interval: (1 * 60 * 60 * 1000),
    labelFormatter: function(e){
      return CanvasJS.formatDate(e.value, "DD - h:mm TT");
    }
  },

  toolTip:{
    contentFormatter: function ( e ) {
      return "<strong>" + e.entries[0].dataPoint.label + "</strong></br> Start: " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "DD - h:mm TT") + "</br>End : " +  CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD - h:mm TT");  
    }},

  data: [
    {
      type: "rangeColumn",
      dataPoints: [
        { label: "Walking", y: [(new Date(2016, 0, 28, 12, 20)).getTime(), (new Date(2016, 0, 28, 13, 00)).getTime()] },
        { label: "Running", y: [(new Date(2016, 0, 28, 13, 20)).getTime(), (new Date(2016, 0, 28, 14, 20)).getTime()] },
        { label: "Walking", y: [(new Date(2016, 0, 28, 14, 20)).getTime(), (new Date(2016, 0, 28, 15, 00)).getTime()] }
      ]
    }
  ]                      
});
chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>

【讨论】：