CanvasJS-动态dataPoints .push-循环

时间:2018-08-30 15:36:09

标签: javascript php charts canvasjs

我有一个PHP动态数组,其字符串值为:

Array ( [Overload] => 42 [Reliability] => 1024 [Relocation] => 20 [NRUC] => 7 [Storm] => 589) 

我想知道如何在dataPoints中使用CanvasJS在甜甜圈图中循环显示它们,每个部分展示每种类型:

var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light1",
    exportFileName: "Doughnut Chart",
    animationEnabled: true,
    title:{
        text: "Work Type",
        wrap: false,
        fontFamily: "tahoma",
        fontSize: 26
    },
    legend:{
        cursor: "pointer",
        itemclick: explodePie,
        verticalAlign: "bottom",    horizontalAlign: "bottom"
    },
    data: [{
        type: "doughnut",
        innerRadius: 60,
        showInLegend: true,
        toolTipContent: "<b>{name}</b>: {y}",
        indexLabel: "{name} - {y}",
        indexLabelFontSize: 14,
        dataPoints: [/*???????*/]}]
          });

我尝试使用.push,但仍然存在问题,并且无法正常工作:

var dps = [];
<?for($i = 0; $i <$COUNT_TYPE; $i++) {?>dps.push({y:<?echo $val[$i]?>, name: <?echo $key[$i];?>});

    <?}?>

var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light1",
    exportFileName: "Doughnut Chart",
    animationEnabled: true,
    title:{
        text: "Work Type",
        wrap: false,
        fontFamily: "tahoma",
        fontSize: 26
    },
    legend:{
        cursor: "pointer",
        itemclick: explodePie,
        verticalAlign: "bottom",    horizontalAlign: "bottom"
    },
    data: [{
        type: "doughnut",
        innerRadius: 60,
        showInLegend: true,
        toolTipContent: "<b>{name}</b>: {y}",
        indexLabel: "{name} - {y}",
        indexLabelFontSize: 14,
        dataPoints: dps }]
          });

我的php变量是:

                 $NEW_TYPEOFWORK = array_count_values($TW);
                 /*$NEW_TYPEOFWORK = Array ( [Overload] => 42 [Reliability] => 1024 [Relocation] => 20 [NRUC] => 7 [Storm] => 589) */
                 foreach($NEW_TYPEOFWORK as $key[]=>$val[]){}
                 $COUNT_TYPE = count($NEW_TYPEOFWORK);

0 个答案:

没有答案