【问题标题】:Php array and chartjsphp数组和chartjs
【发布时间】:2017-12-27 09:53:21
【问题描述】:

我需要有关 chart.js (www.chartjs.or) 的帮助。

我在 php 中有一个数组,可以说

    $array_with_data = array(1,1,1,1,1,1,2,1,2);

这个数组来自mysql数据库。现在我想使用这个chart.js,在这一行中

      data: [12, 19, 3, 5, 2, 3, 2,3,1,2,4,5],

我想用我在 php 中的数组替换这个数组数据。我怎样才能做到这一点? :) 这个图表的完整代码在底部。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>


<canvas id="myChart" width="400" height="400"></canvas>
<script>



	
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Orange", "Orange", "Orange", "Orange", "Orange", "Orange"],
        datasets: [{
            label: '# of Votes',
		
            data: [12, 19, 3, 5, 2, 3, 2,3,1,2,4,5],
            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)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

【问题讨论】:

  • 对不起!代码错误!
  • 试试这个 var data =

标签: javascript php mysql arrays chart.js


【解决方案1】:

在php中

$data = json_encode($array_with_data);

在你的 js 中

var data = <?php echo $data ?>;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-03
    • 1970-01-01
    • 2017-08-04
    • 1970-01-01
    • 2018-12-02
    • 1970-01-01
    相关资源
    最近更新 更多