将php变量传递给chart.js文件

时间:2016-11-17 22:00:18

标签: javascript

嗨,我的php文件中有这个数组变量

$data_chart=[95,65,25,12,458,896,325];

我创建了一个脚本,如下所示

 <script>
     var data = <?php echo json_encode($data_chart); ?>;

    </script>

我如何将数据变量传递到我的chart-data.js文件中?(不将变量嵌入到html标签中)

1 个答案:

答案 0 :(得分:1)

好吧,因为你正在使用像这样的PHP,相关的javascript将必须与canvas元素在同一个html文档上。以下内容改编自chart.js documentation here。这样的事情可以奏效:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
  
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'type',
    data: {
        labels: ["1", "2", "3", "4", "5", "6", "7"],
        datasets: [{
            label: 'my data',
            data: <?php echo json_encode($data_chart); ?>,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderWidth: 1
        }]
    }
});
</script>

如果你真的不能将javascript嵌入到html文件中,那么你可以通过html文件将php数据存储在本地存储中,然后在javascript文件中读取,但这似乎不必要的困难。