0

我认为这将是一个有趣的项目，看看我是否可以从 Google Analytics 获取数据并将其显示在自定义仪表板中，并希望能学到一两件事关于使用 json 和 javascript。

经过大量调试后，我现在设法使用他们的 php api 从 Google Analytics 服务器中提取数据，并将输出保存到服务器上的 data.json 中。

在 data.json 下方，根据 JSONLint.com 有效：

{
"0": {
    "date": "20160113",
    "pageviews": "46",
    "sessions": "21"
},
"1": {
    "date": "20160114",
    "pageviews": "66",
    "sessions": "18"
},
"2": {
    "date": "20160112",
    "pageviews": "50",
    "sessions": "14"
},
"3": {
    "date": "20160116",
    "pageviews": "19",
    "sessions": "14"
},
"4": {
    "date": "20160117",
    "pageviews": "23",
    "sessions": "14"
},
"5": {
    "date": "20160115",
    "pageviews": "38",
    "sessions": "11"
},
"6": {
    "date": "20160118",
    "pageviews": "35",
    "sessions": "9"
},
"7": {
    "date": "20160119",
    "pageviews": "15",
    "sessions": "7"
    }
}

现在我尝试使用 data.json 中的数据并将其输入图表师的标签/系列以绘制图表。

var labelArray = [];
            var seriesArray = [];
            var labelOutput = [];

            $.getJSON("data.json", function(json) {

                //var jsonObj = JSON.parse(json);

                for (var i in json){
                    labelArray.push(json[i].date);
                };

                for (var i in json){
                    seriesArray.push(json[i].sessions);
                };

               // var myData = {
               //     labels: 
               // }

               // labelOutput = labelArray.join(',')
               // seriesOutput = serieArray.join(',')

                console.log(labelArray); 
                console.log(seriesArray); 
                // this will show the info it in firebug console
            });

                new Chartist.Line('.ct-chart', {
                    labels: [labelArray],
                    series: [[seriesArray]]
                });

但是我目前不知道为什么这不起作用，X 轴和 Y 轴上的标签正确显示，但没有显示图表。

我尝试使用 .join 来查看是否有所不同，但使用 labelOutput 而不是 labelArray 也不会改变任何东西。

在控制台中，输入chartist的数组对我来说似乎没问题，如果我将它从控制台复制粘贴到脚本中，一切正常。

labelArray 和 seriesArray 的当前输出：

标签数组

Array [ "20160113", "20160114", "20160112", "20160116", "20160117", "20160115", "20160118", "20160119" ]

系列数组

 Array [ "21", "18", "14", "14", "14", "11", "9", "7" ]

任何人都知道为什么chartist.js 确实设法沿轴添加正确的标签，但未能读取相同的数据并绘制图表？

4

3 回答 3

2

尽管@mnutsch 的回答有效，但有一种更简单的方法可以将动态内容添加到图表中。

您可以简单地将数组直接添加为参数，我认为这是 OP 试图做的。

响应对象将是 ajax 数据

var seriesVals = [];
var labelsVals = [];
for (var i = 0; i < response.length; i++) {
 seriesVals.push(response[i].total);
 labelsVals.push(response[i].response_code);
}

var pieData = {
series: seriesVals,
labels: labelsVals
};
于 2017-10-29T14:52:13.820 回答
1

如果以后有人遇到这种情况，您也可以这样做：

//Create javascript arrays with the values and labels, replace this with code to read from the database/API/etc.
var array_1_values = [100, 120, 180, 200, 90]; //these are the values of the first line
var array_2_values = [20, 35, 65, 125, 245]; //these are the values of the second line
var array_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; //these are the labels that will appear at the bottom of the chart

//create a prototype multi-dimensional array
  var data_chart1 = {
    labels: [],
    series: [
        [],
        []
    ]
  };

//populate the multi-dimensional array
  for (var i = 0; i < array_1_values.length; i += 1)
  {
    data_chart1.series[0].push(array_1_values[i])
    data_chart1.series[1].push(array_2_values[i])
    data_chart1.labels.push(array_labels[i])
  }

  //set the size of chart 1
  var options_chart1 = {
    width: '300px',
    height: '200px'
  };

  //create chart 1
  new Chartist.Line('#chart1', data_chart1, options_chart1);
于 2017-03-01T16:49:50.027 回答
0

万一其他人偶然发现了这个问题，下面是我想出的让它工作的方法。

经过一天的反复试验，我设法查明了问题所在。

问题是：

在最初的情况下，我尝试使用一个普通数组作为标签和系列的输入。但是，Chartist 需要对象来呈现标签/系列以及图形。

以下内容适用于我从 data.json 中提取数据，将其添加到对象并将其提供给图表专家。

var labelArray = {};
            var seriesArray = {};
            var labelOutput = [];
            var Output

            // $.getJSON("data.json", function(json) {

            $.ajax({
                  url: 'data.json',
                  async: false,
                  dataType: 'text',
                  success: function(json) {

                labelArray = JSON.parse(json);

               data = {
                labels: 

                [   
                    labelArray[0].date,
                    labelArray[1].date,
                    labelArray[2].date,
                    labelArray[3].date,
                    labelArray[4].date,
                    labelArray[5].date,
                    labelArray[6].date
                                        ],
                series: [[
                    labelArray[0].sessions,
                    labelArray[1].sessions,
                    labelArray[2].sessions,
                    labelArray[3].sessions,
                    labelArray[4].sessions,
                    labelArray[5].sessions,
                    labelArray[6].sessions
                                        ]]
               }

              }
            });

                new Chartist.Line('.ct-chart', data);

决定使用 $.ajax 来获取 json 文件而不是 getJSON，因为这允许我禁用异步加载，确保在绘制图形时数据可用。

此外，可以将 dataType 设置为 Json 而不是 text，但这会在 JSON.parse 行中产生错误。假设这是因为它试图将 json 解析为 json，但没有这样做。但这是我设法让它工作并将json添加到对象的唯一方法。

很可能整个 labelArray[0].date, labelArray[1].date 效率很低，应该改进，但它现在可以工作。

于 2016-01-21T06:56:44.233 回答