Question

我有一个json文件（data.json）和HTML文件，其中包含一个选择菜单和按钮选择月份图表应显示从json文件中获取值当前图表显示在硬编码值上但我想要动态相反，所以请建议如何做到这一点。

以下是plunkr链接code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>

<script src="data.json"></script>

<script>

function func()
{
var z=document.getElementById('month').value;


alert(mydata);



        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Sales Report"+z,
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 28

            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0                    
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 18,
                labelFontColor: "Peru"

            },
            data: [
            {
                indexLabelFontSize: 26,
                toolTipContent: "<span style='\"'color: {color};'\"'><strong>{indexLabel}</strong></span><span style='\"'font-size: 20px; color:peru '\"'><strong>{y}</strong></span>",

                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                dataPoints: [
                    { y: mydata.January[1].count, label: "21%", indexLabel: "Video" },
                    { y: 25, label: "25%", indexLabel: "Dining" },
                    { y: 73, label: "33%", indexLabel: "Entertainment" },
                    { y: 36, label: "36%", indexLabel: "News" },
                    { y: 42, label: "42%", indexLabel: "Music" },
                    { y: 60, label: "49%", indexLabel: "Social Networking" },
                    { y: 50, label: "50%", indexLabel: "Maps/ Search" },
                    { y: 55, label: "55%", indexLabel: "Weather" },
                    { y: 61, label: "61%", indexLabel: "Games" }


                ]
            }
            ]
        });

        chart.render();


}
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>

<body>  
<div>
    <span>
        <select id='month'>
            <option selected value='January'>January</option>
    <option value='February'>February</option>
    <option value='March'>March</option>
    <option value='April'>April</option>
    <option value='May'>May</option>
    <option value='June'>June</option>
    <option value='July'>July</option>
    <option value='August'>August</option>
    <option value='September'>September</option>
    <option value='October'>October</option>
    <option value='November'>November</option>
    <option value='December'>December</option>
        </select>
    </span>
    <span><input type="submit" id="reportbtn" value="Report" onclick="func()"/></span>
</div>
<div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

</html>

Answer 1

我使用Google图表做同样的事情：

选择月份下拉列表
按提交按钮
通过AJAX将java脚本/ jquery值传递给服务器
根据您想要的月份数据写入数据库查询对于例如数据值应按月分组 **这取决于你的要求，这只是一个例子。
```
+------------+------+
|   month    |value |
+------------+------+
|  January   |  11  |
|  February  |  22  |
+------------+------+
```
执行数据库查询
获取多维数组的输出对于例如使用PHP - ＆gt; $ table [] = array（months，values）;
JSON编码来自服务器的输出行对于例如echo json_encode（$ table）;
将AJAX响应数据提供回客户端图表
相应地在图表中呈现数据

根据用户从JSON文件中选择的月份显示图表

1 个答案: