Question

我正在尝试在我的网站上显示一个饼状字符，但我从一个网站上选择了一些代码，但无法正常工作

$dataPoints = array(
    array("label"=> "Food + Drinks", "y"=> 590),
    array("label"=> "Activities and Entertainments", "y"=> 261),
    array("label"=> "Health and Fitness", "y"=> 158),
    array("label"=> "Shopping & Misc", "y"=> 72),
    array("label"=> "Transportation", "y"=> 191),
    array("label"=> "Rent", "y"=> 573),
    array("label"=> "Travel Insurance", "y"=> 126)
);

?>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    title:{
        text: "Average Expense Per Day  in Thai Baht"
    },
    subtitles: [{
        text: "Currency Used: Thai Baht (฿)"
    }],
    data: [{
        type: "pie",
        showInLegend: "true",
        legendText: "{label}",
        indexLabelFontSize: 16,
        indexLabel: "{label} - #percent%",
        yValueFormatString: "฿#,##0",
        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();

}

this is source code link from where i had taken this

没有结果

Answer 1

问题似乎出在您的后端，因为如果您将$dataPoints替换为JavaScript数组，则它可以正常工作。

window.onload = function () {
    var dataPoints = [{'label': 'Food Drinks', 'y': 590}, {'label':'Acttivites', y:251}];
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        title:{
            text: "Average Expense Per Day  in Thai Baht"
        },
        subtitles: [{
            text: "Currency Used: Thai Baht (฿)"
        }],
        data: [{
            type: "pie",
            showInLegend: "true",
            legendText: "{label}",
            indexLabelFontSize: 16,
            indexLabel: "{label} - #percent%",
            yValueFormatString: "฿#,##0",
            dataPoints: dataPoints
        }]
    });
chart.render();
}

<html>
<head>  

</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

canvas js饼图不起作用

1 个答案: