Question

我需要以一种可以在图形中显示JSON数据的方式进行编码。但我不知道如何以某种方式转换此编码，以便此图显示JSON数据。为了方便起见，我在此处发布代码。

<!DOCTYPE HTML>
    <html>
    <head>
    <script>

    window.onload = function () {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "dark2",

        title:{
            text: "MOVEMENT CATEGORY"
              },

        subtitles:[
              {
            text: "(STANDSTILL, ON FOOT or ON VEHICLE)",

              },],

        axisX:{
            title: "TIME SLOT"
              },

        axisY:{
            title:"Number of users(%)",
            suffix: "%"
              },

        toolTip:
              {
            shared: true
              },

        data: [{
            type: "stackedArea100",
            name: "STANDSTILL",
            showInLegend: "true",
            yValueFormatString: "#,##0.##\"%\"",
            dataPoints: [
                { y: 83, label: "6am - 10am" },
                { y: 51, label: "10am - 4pm" },
                { y: 64, label: "4pm - 8pm" },
                { y: 71, label: "8pm - 12am" },
                { y: 45, label: "12am - 6am" }
            ]
        },
        {
            type: "stackedArea100",
            name: "ON FOOT",
            showInLegend: "true",
            yValueFormatString: "#,##0.##\"%\"",
            dataPoints: [
                { y: 20 , label: "6am - 10am" },
                { y: 30, label: "10am - 4pm" },
                { y: 24, label: "4pm - 8pm" },
                { y: 38, label: "8pm - 12am" },
                { y: 51, label: "12am - 6am" }
            ]
        },

        {
            type: "stackedArea100",
            name: "ON VEHICLE",
            showInLegend: "true",
            yValueFormatString: "#,##0.##\"%\"",
            dataPoints: [
                { y: 11, label: "6am - 10am" },
                { y: 61, label: "10am - 4pm" },
                { y: 50, label: "4pm - 8pm" },
                { y: 23, label: "8pm - 12am" },
                { y: 31, label: "12am - 6am" }
            ]
        }]
    });
    chart.render();

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

使用JSON数据制作CanvasJS图表

0 个答案: