画布JS图表渲染问题

Question

I am implementing range bar graph in Canvas JS. 我在Canvas JS中实现范围条形图。 The X axis are day interval and the y axis are time hours. X轴是日期间隔，y轴是时间。 I want to have have the y value range between hours in time. 我希望小时之间具有y值范围。 Here's my code below, The problem is my chart doesn't render. 这是下面的代码，问题是我的图表无法显示。

It takes forever to load and crashes without loading. 它要花很长时间才能加载，不加载就会崩溃。 This only happens if I use new date value for my y values range. 仅当我在y值范围内使用新的日期值时，才会发生这种情况。 Does any one here know why its not loading? 这里有人知道为什么不加载吗？ How can I have range bar chart with y-axis hour interval that works? 如何使用具有y轴小时间隔的范围条形图？

Any help would be much appreciated. 任何帮助将非常感激。 Here's my code in jsfiddle: https://jsfiddle.net/syedrh/3kpn5hk1/ 这是我在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>

Answer 1

Syed, 赛德

Date-Time support for y-axis is not available in CanvasJS, as of now. 到目前为止，CanvasJS中不支持y轴的日期时间。 But as a work-around to use date-time over y-axis. 但作为一种解决方法，可以在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>

画布JS图表渲染问题

问题描述

1 个解决方案

解决方案1
3 2017-09-01 05:22:04

画布JS图表渲染问题

问题描述

1 个解决方案

解决方案1 3 2017-09-01 05:22:04

解决方案1
3 2017-09-01 05:22:04