獲取Charts.js以從Google Sheet JSON數據讀取

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>