如何获取 Piwik Json 数据并将其与 chart.js 一起使用？答案

【问题标题】：How to get Piwik Json Data and use it with chart.js?如何获取 Piwik Json 数据并将其与 chart.js 一起使用？
【发布时间】：2016-09-05 08:45:37
【问题描述】：

我使用 piwik php api 来生成这样的数据：

[   
{"label":"1680x1050","nb_visits":9,"nb_actions":53,"max_actions":27,"sum_visit_length":3051,"bounce_count":3,"nb_visits_converted":0,"sum_daily_nb_uniq_visitors":7,"sum_daily_nb_users":0,"segment":"resolution==1680x1050"},
{"label":"1440x900","nb_visits":1,"nb_actions":1,"max_actions":1,"sum_visit_length":0,"bounce_count":1,"nb_visits_converted":0,"sum_daily_nb_uniq_visitors":1,"sum_daily_nb_users":0,"segment":"resolution==1440x900"}
]

我想使用 chart.js 来可视化这些数据，目前我的代码看起来像这样并且不起作用：

var chartjsData = [];
var chartjsLabel = [];

$.getJSON("piwik.php", function (json) {
 ///src = http://stackoverflow.com/questions/24696329/how-to-use-json-data-in-chart-js
 for (var i = 0; i < json.length; i++) {
    chartjsData.push(json[i].nb_visits);  
    chartjsLabel.push(json[i].label);      
 }   
});    

var barChartData = {
    labels :[chartjsLabel],datasets : [
       {
          fillColor : "rgba(220,280,220,0.5)",
          strokeColor : "rgba(220,220,220,1)",
          data : chartjsData
        }
      ]
    };

var ctx = document.getElementById("myChart").getContext("2d");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
});

也许有人可以给我一个如何使用 chart.js 和 piwik 的 json 数据的工作示例，或者提示如何让它工作，非常感谢！

【问题讨论】：

标签： json matomo

【解决方案1】：

我是这样理解的：

var label = []; 
var data = [];  

$.getJSON("piwik.php", function (json) {
    for (var i = 0; i < json.length; i++) {
    label.push(json[i].label); 
    data.push(json[i].nb_visits);
    }
graph();
});


function graph(){
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: '',
                data: data,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                ],
                borderWidth: 1
            }]
        },
        options: {

        }
    });


};

【讨论】：