javascript - canvasjs 显示空白，数据未显示

Question

我正在使用 Canvasjs 创建烛台图。这些值来自 PHP，我使用 JSON 编码来转换为 javascript 数组。我以与示例相同的格式重新创建了 javascript 数组，就是这个

 dataPoints=[{x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]}]

但是 Canvas 是空白的？这是我的代码:

<?php


$chart_array[] = array("x"=>"2012-01-01","y"=>array("5198", "5629", "5159", "5385"));
$chart_array[] = array("x"=>"2012-01-02","y"=>array("5366", "5499", "5135", "5295"));

    $chart_array = json_encode($chart_array);

?>
    <script type="text/javascript">
        window.onload = function () {


            var resultArray = <?php echo $chart_array; ?>;

            var new_array = [];
            jQuery.each(resultArray, function(index, item) {

                new_array.push({ x: new Date(item.x), y: item.y });

            });

console.log(new_array);
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Basic Candle Stick Chart"
                },
                zoomEnabled: true,
                axisY: {
                    includeZero: false,
                    title: "Prices",
                    prefix: "$ "
                },
                axisX: {
                    interval: 2,
                    intervalType: "month",
                    valueFormatString: "MMM-YY",
                },
                data: [
                {
                    type: "candlestick",
                    dataPoints: new_array
                }
                ]
            });
            chart.render();
        }
    </script>

console.log 显示数组存在。为什么显示空白 Canvas ？怎么解决？

Answer 1

Y-value在你的代码中似乎是字符串，它应该是数字。即使您将其存储为字符串，在将其传递给图表选项之前将其解析为数字也可以正常工作。

这是工作代码:

<?php

$chart_array[] = array("x"=>"2012-01-01","y"=>array(5198, 5629, 5159, 5385));
$chart_array[] = array("x"=>"2012-01-02","y"=>array(5366, 5499, 5135, 5295));

$chart_array = json_encode($chart_array);
?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<script type="text/javascript">
    window.onload = function () {
        var resultArray = <?php echo $chart_array; ?>;

        var new_array = [];
        jQuery.each(resultArray, function(index, item) {
            new_array.push({ x: new Date(item.x), y: item.y });
        });

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Basic Candle Stick Chart"
            },
            zoomEnabled: true,
            axisY: {
                includeZero: false,
                title: "Prices",
                prefix: "$ "
            },
            axisX: {
                interval: 2,
                intervalType: "month",
                valueFormatString: "MMM-YY",
            },
            data: [
            {
                type: "candlestick",
                dataPoints: new_array
            }
            ]
        });
        chart.render();
    }
</script>

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