Question

我想制作图表并从数据库中设置标签和值。我已经获取数据并转换为json对象。这是设置标签的默认脚本，

<script>
    window.onload = function () {
        var arrchartdata = JSON.parse('<?php print $a;?>');

var options = {
    animationEnabled: true,
    title: {
        text: "GDP Growth Rate - 2016"
    },
    axisY: {
        title: "Growth Rate (in %)",
        suffix: "%",
        includeZero: false
    },
    axisX: {
        title: "Countries"
    },
    data: [{
        type: "column",
        yValueFormatString: "#,##0.0#"%"",
        dataPoints: [
        for (var i = 0; i <arrchartdata.length ; i++) {
            console.log(arrchartdata[i].MenuName);
        }
        { label: arrchartdata[0].MenuName, y: 10.09 },  
        { label: "Turks & Caicos Islands", y: 9.40 },   
        { label: "Nauru", y: 8.50 },
        { label: "Ethiopia", y: 7.96 }, 
        { label: "Uzbekistan", y: 7.80 },
        { label: "Nepal", y: 7.56 },
        { label: "Iceland", y: 7.20 },
        { label: "India", y: 7.1 }

        ]
    }]
};
$("#chartContainer").CanvasJSChart(options);

}
</script>

我想循环标签：arrchardata [0] .MenuName，y：10.09 我该怎么办？我已经尝试过在数据内部，但是它返回错误。任何帮助将不胜感激！

Answer 1

您将在options外部添加循环，将结果存储在变量内，然后在options内使用变量，如下所示。

我已经存储在dataPoints变量中。

var dataPoints = [];

for (var i = 0; i <arrchartdata.length ; i++) {
    console.log(arrchartdata[i].MenuName);
    dataPoints.push({label : arrchartdata[i].MenuName});
}

var options = {
    animationEnabled: true,
    title: {
        text: "GDP Growth Rate - 2016"
    },
    axisY: {
        title: "Growth Rate (in %)",
        suffix: "%",
        includeZero: false
    },
    axisX: {
        title: "Countries"
    },
    data: [{
        type: "column",
        yValueFormatString: "#,##0.0#"%"",
        dataPoints: dataPoints
    }]
};
$("#chartContainer").CanvasJSChart(options);

}
</script>

如何在JavaScript的dataPoints图表中设置标签？

1 个答案: