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

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

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也不会改变任何事情

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

标签阵列和系列阵列的电流输出：

拉伯雷

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

序列阵列

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

---

有人知道为什么chartist.js能够沿着轴添加正确的标签，但却无法读取相同的数据并绘制图表吗？

如果其他人发现了这个问题，下面是我的解决方法。

经过一天的反复试验，我终于找到了问题所在

问题是：

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

下面的代码适用于我从data.json中提取数据，将其添加到对象并提供给ChartList

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，因为这允许我禁用异步加载，确保绘制图形时数据可用

此外，可以将数据类型设置为Json而不是文本，但这会在Json.parse行中产生错误。假设这是因为它试图将json解析为json，但未能做到这一点。但这是我设法让它工作并将json添加到对象的唯一方法

---

很可能是整个labelArray[0]。日期，labelArray[1]。日期效率很低，应该改进，但它现在可以工作了。

如果其他人发现了这个问题，下面是我如何让它工作的。

经过一天的反复试验，我终于找到了问题所在

问题是：

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

下面的代码适用于我从data.json中提取数据，将其添加到对象并提供给ChartList

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，因为这允许我禁用异步加载，确保绘制图形时数据可用

此外，可以将数据类型设置为Json而不是文本，但这会在Json.parse行中产生错误。假设这是因为它试图将json解析为json，但未能做到这一点。但这是我设法让它工作并将json添加到对象的唯一方法

---

很可能是整个labelArray[0]。日期，labelArray[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);

//创建带有值和标签的javascript数组，将其替换为从数据库/API/etc读取的代码。
变量数组_1_值=[10012018020090]//这些是第一行的值
var数组_2_值=[20,35,65,125,245]//这些是第二行的值
var数组_标签=['Mon'，'Tue'，'Wed'，'Thu'，'Fri']//这些是将显示在图表底部的标签
//创建多维阵列的原型
var数据图表1={
标签：[]，
系列：[
[],
[]
]
};
//填充多维数组
对于（变量i=0；i

如果以后有人遇到此问题，您也可以这样做：

//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);

//创建带有值和标签的javascript数组，将其替换为从数据库/API/etc读取的代码。
变量数组_1_值=[10012018020090]//这些是第一行的值
var数组_2_值=[20,35,65,125,245]//这些是第二行的值
var数组_标签=['Mon'，'Tue'，'Wed'，'Thu'，'Fri']//这些是将显示在图表底部的标签
//创建多维阵列的原型
var数据图表1={
标签：[]，
系列：[
[],
[]
]
};
//填充多维数组
对于（变量i=0；i

尽管@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
};

var系列VAL=[]；
var-labelsVals=[]；
对于（变量i=0；i