jquery 将变量传递给canvasjs中的数据点

lx0bsm1f  于 2023-08-04  发布在  jQuery
关注(0)|答案(5)|浏览(80)

我正在尝试使用数据库数据从canvasjs中创建行garph。但是我在将数据传递到数据点时遇到了问题。

$.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"}
 ]


我不明白问题所在。请帮帮忙。

bd1hkmkf

bd1hkmkf1#

你不需要像字符串一样创建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();
    }
});

字符串

x759pob2

x759pob22#

不要把所有东西都创建为字符串:

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)});
}

字符串

yizd12fk

yizd12fk3#

你可以在视图中构建数组数据,使用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:
dataPoints:当前月份

o3imoua4

o3imoua44#

CanvasJS只允许你传递像x,y,label,IndexLabel这样的东西。因此,如果您想传递下钻数据的ID(或多个ID),则不能。我试着想个办法。我唯一想到的就是创造一个虚拟系列。我将indexLabel设置为dummy series,使其成为JSON数据字符串。然后当我单击时,我可以从e.dataPointIndex中获得y轴索引

DATA.push({ showInLegend: false, markerType: 'none',label: 
d[i].cv_quality_metric_period_ending, y:   parseFloat((Math.round(  
d[i].cv_quality_metric_value * 100) / 100).toFixed(2)), indexLabel: '{"metric_id":' + metric_id + '}'  });

字符串
具有click功能的系列如下所示:

R4Q.push({ label: d[i].cv_quality_metric_period_ending, indexLabel: 
d[i].cv_quality_metric_R4Q, y:  parseFloat((Math.round(  
d[i].cv_quality_metric_r4q * 100) / 100).toFixed(2)) ,click: function(e){ 
chartClickHandler( metric_id, e) },markerColor: markerColor, 
markerType:markerType,markerSize: markerSize});


metric_id对于所有数据都是相同的,因此它是正确的和可访问的。
然后我可以通过引用var index = e在伪序列中查找该列的数据。dataPointIndex //clicked y column从0开始,所以2是第三个y列的数据。

function chartClickHandler(metric_id,e){
var index = e.dataPointIndex
var data = e.chart.data[2].dataPoints[index].indexLabel
data = JSON.parse(data)
//do what you need to do with the passed data
}


在构造图表的JSON中,我添加了虚拟系列

{
        name: "data", 
        type: "spline",       
        showInLegend: false,        
        legendMarkerType: 'none',        
    visible:false,
        dataPoints: DATA
        }

8gsdolmq

8gsdolmq5#

传递数据,如dataPoints:JSON.parse(data)
而不是dataPoints:数据,数据

相关问题