将变量传递给canvasjs中的datapoints答案

【问题标题】：Pass variable to datapoints in canvasjs将变量传递给canvasjs中的datapoints
【发布时间】：2015-06-07 02:32:36
【问题描述】：

我正在尝试使用数据库数据从 canvasjs 制作线条图。但我在将数据传递给数据点时遇到问题。

 $.ajax({
    dataType : "json",
    type: "POST",
    url: base_url + 'index.php/dashboard/line_graph',
    data: {},
    success: function(data)
    {
        for(var i = 0; i < data.length; i++)
        {
            var firstdate = data[i].nextdate;
            var res = firstdate.replace(/[-]/g,','); 
            fd += '{ x: new Date(' + res + '), y:' + data[i].count +'},';
        }
        var fin = fd.slice(0,-1);
         finals = "[" + fin + "]";            
                var chart = new CanvasJS.Chart("chartContainer",
                  {

                    title:{
                    text: "Booking - per month (DEMO)"
                    },
                     data: [
                    {
                      type: "line",

                      dataPoints: finals

                    }
                    ]
                  });

                  chart.render();

    }
});

当我提醒finals 并将提醒的数据复制粘贴到数据点并运行时，它就开始工作了。但是当包含相同数据的变量传递给数据点时，它就不起作用了。

在控制台日志中，我收到此错误。

 TypeError: l.dataPoints[q].x is undefined

数据点的格式是这样的。当我发出警报时，变量finals 也包含相同的数据。

 [
 { x: new Date(2015,03,6), y:4},
 { x: new Date(2015,03,11), y:0},
 { x: new Date(2015,03,16), y:0},
 { x: new Date(2015,03,21), y:0},
 { x: new Date(2015,03,26), y:0},
 { x: new Date(2015,03,31), y:14}
 ]

我的页面返回这个 json_encode 格式。

 [
 {"firstdate":"2015-03-01","nextdate":"2015-03-6","count":"4"},    
 {"firstdate":"2015-03-6","nextdate":"2015-03-11","count":"0"},
 {"firstdate":"2015-03-11","nextdate":"2015-03-16","count":"0"},
 {"firstdate":"2015-03-16","nextdate":"2015-03-21","count":"0"},
 {"firstdate":"2015-03-21","nextdate":"2015-03-26","count":"0"},
 {"firstdate":"2015-03-26","nextdate":"2015-03-31","count":"14"}
 ]

我不明白这些问题。请帮忙。

【问题讨论】：

您好，您可以添加您的页面index.php/dashboard/line_graph 返回的数据吗？
您好，我已经编辑了我的问题。折线图返回 json 格式。

标签： javascript jquery ajax html5-canvas canvasjs

【解决方案1】：

不要将所有东西都创建为字符串：

var finals = [];
for(var i = 0; i < data.length; i++)
{
    var firstdate = data[i].nextdate;
    var res = firstdate.replace(/[-]/g,','); 
    finals.push({ x: new Date(res), y: parseInt(data[i].count)});
}

【讨论】：

【解决方案2】：

你不必像字符串一样创建finals变量，你可以直接使用Javascript的对象格式：

$.ajax({
    type: "POST",
    url: base_url + 'index.php/dashboard/line_graph',
    data: {},
    success: function(data)
    {
        var tabData = JSON.parse(data);
        var finals = [];
        for(var i = 0; i < tabData.length; i++)
        {
            var firstdate = tabData[i].nextdate;
            var res = firstdate.split('-'); 
            finals.push({ 'x': new Date(res[2],res[1],res[0]), 'y': tabData[i].count });
        }
        var chart = new CanvasJS.Chart("chartContainer",{
            title:{
                text: "Booking - per month (DEMO)"
            },
            data: [
                {
                    type: "line",
                    dataPoints: finals
                }
            ]
        });

        chart.render();
    }
});

【讨论】：

也许你必须用parseInt function 将tabData[i].count 转换为整数

【解决方案3】：

像这样传递数据数据点：JSON.parse(数据)

而不是数据点：数据

【讨论】：

【解决方案4】：

您可以在视图中构建您的数组数据，使用来自 php 变量的循环，例如：

<script type="text/javascript">
     var current_month = [];
     <?php foreach ($grafico_current as $key => $value) { ?>
        current_month.push({ 'x': new Date(<?php echo $value['ano']; ?>,<?php echo $value['mes']; ?>,<?php echo $value['dia']; ?>), 'y': <?php echo $value['total']; ?> });
     <?php } ?>
 </script>

之后，用这个新的 var 设置 dataPoint：

数据点：当前月

【讨论】：