Question

我使用如下Charts.js在线对图表进行了硬编码：

var config = {
type: 'pie',
data: {
    datasets: [{
        data: [2574,1663,1670],
        backgroundColor: [window.chartColors.red,window.chartColors.green,window.chartColors.blue],
        label: 'Dataset 1'
    }],
    labels: ['Label1','Label2','Label3']
},
options: {
    responsive: true,
    legend: { display: false }
}
};

我正在尝试将数据源更改为Google表格。为此，我使用：

$.getJSON("https://cors.io?https://spreadsheets.google.com/feeds/list/1OAYVJjSUqHdCwcdLSEaENQML8JwK6IwWbFFUkU1PGms/1/public/values?alt=json", function(data) {
});

接下来，我从row1 / columnA（名为“图表”）中获取数据，并获得如下值：

data.feed.entry[0]['gsx$charts']['$t'];

其中gsx $ charts是列名，而entry [0]是数据的第一行。如果我愿意的话，这一切都很好，例如：

<p id="demo"></p>
<script>
$.getJSON("https://cors.io?https://spreadsheets.google.com/feeds/list/1OAYVJjSUqHdCwcdLSEaENQML8JwK6IwWbFFUkU1PGms/1/public/values?alt=json", function(data) {
document.getElementById("demo").innerHTML = data.feed.entry[0]['gsx$charts']['$t'];
});
</script>

这将把值正确打印到屏幕上。

现在，我正在尝试获取Charts.js以将数据用于标签和图表数据。我不确定该如何处理。

不起作用的示例：

labels: [
    'data.feed.entry[0]['gsx$charts']['$t'];',
    'data.feed.entry[1]['gsx$charts']['$t'];',
    'data.feed.entry[2]['gsx$charts']['$t'];'
]

labels: [
    data.feed.entry[0]['gsx$charts']['$t'];,
    data.feed.entry[1]['gsx$charts']['$t'];,
    data.feed.entry[2]['gsx$charts']['$t'];
]

labels: [
    data.feed.entry[0]['gsx$charts']['$t'],
    data.feed.entry[1]['gsx$charts']['$t'],
    data.feed.entry[2]['gsx$charts']['$t']
]

在大多数情况下，图表无法加载或实际上无法将data.feed代码作为文本标签呈现。

Google表格有数百行和几列，具有唯一的标签和数据。我这样称呼特定的行或列：

// Read 'charts' column, row 1 (0 is actually the first row)
data.feed.entry[0]['gsx$charts']['$t'];'
// Read 'charts' column, row 2
data.feed.entry[1]['gsx$charts']['$t'];'
// Read 'charts' column, row 33
data.feed.entry[32]['gsx$charts']['$t'];'
// Read 'titles' column, row 24
data.feed.entry[23]['gsx$titles']['$t'];'
// and so on

似乎无法弄清楚如何获取Charts.js语法来读取值。思想得到赞赏。

Answer 1

数组值必须用逗号分隔。

labels: [
    data.feed.entry[0]["gsx$charts"]["$t"],
    data.feed.entry[1]["gsx$charts"]["$t"],
    data.feed.entry[2]["gsx$charts"]["$t"]
]

查看此实现：

(function() {
  window.chartColors = {
    red: "rgb(255, 99, 132)",
    green: "rgb(75, 192, 192)",
    blue: "rgb(54, 162, 235)"
  };
  $.getJSON("https://spreadsheets.google.com/feeds/list/1OAYVJjSUqHdCwcdLSEaENQML8JwK6IwWbFFUkU1PGms/1/public/values?alt=json", function(data) {
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx, {
      type: "pie",
      data: {
        datasets: [{
          data: [2574, 1663, 1670],
          backgroundColor: [window.chartColors.red, window.chartColors.green, window.chartColors.blue],
          label: "Dataset 1"
        }],
        labels: [
          data.feed.entry[0]["gsx$charts"]["$t"],
          data.feed.entry[1]["gsx$charts"]["$t"],
          data.feed.entry[2]["gsx$charts"]["$t"]
        ]
      },
      options: {
        responsive: true
      }
    });
  });
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>
<div id="container" style="width: 75%;">
  <canvas id="canvas"></canvas>
</div>

获取Charts.js以从Google Sheet JSON数据读取

1 个答案: