Question

我认为这是一个有趣的项目，看看我是否可以从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中的数据并将其输入到chartist的标签/系列中以绘制图形。

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也不会改变任何内容。

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

labelArray和seriesArray的当前输出：

labelArray

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

seriesArray

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

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

Answer 1

如果以后遇到任何人，你也可以这样做：

checkRead(FileDescriptor fd)

Answer 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
};

Answer 3

如果其他人偶然发现了这个问题，下面是我想出来让它发挥作用。

经过另一天的追踪和错误，我设法找出了问题。

问题是：

在最初的情况下，我尝试使用普通数组作为标签和系列的输入。但是，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]。日期，labelArray [1] .date效率很低，应该进行改进，但现在可以使用。

将javascript数组加载到Chartist.js中作为serie

3 个答案: