将Google表格json数据读入chartjs

Question

我有一个Google工作表，其中包含两个简单的列，一个标签，另一个是值。我成功将其转换为json，并使用以下js]在表中使用了此类值]

$.getJSON("https://spreadsheets.google.com/feeds/list/1GnakUnNQvFXjuzMSPnBpU9eufb4SooQLGL2oFc3lfAs/od6/public/values?alt=json", function (data) {

      var sheetData = data.feed.entry;

      var i;
      for (i = 0; i < sheetData.length; i++) {

        var names = data.feed.entry[i]['gsx$names']['$t'];
        var numbers = data.feed.entry[i]['gsx$numbers']['$t'];



      }
    });
并且想在雷达chart.js中使用它，我设法使其起作用，但仅适用于硬编码数据

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
var chartColors = {
    red: 'rgba(253, 48, 76)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgba(240,236,211)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgba(42,105,163)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgba(48,48,50)'
};

var color = Chart.helpers.color;
var config = {
  type: 'radar',
  data: {
    labels: [
      "label1",
      "label2", "label3", "label3", "label4", "label5", "label6"
    ],
    datasets: [{
      label: "Current level",
      backgroundColor: color(chartColors.red).alpha(0.2).rgbString(),
      borderColor: chartColors.red,
      pointBackgroundColor: chartColors.red,
      data: [
        95,
        65,
        74,
        87,
        70,
        78,
        93
      ]
    }, {
      label: "Goal level",
      backgroundColor: color(chartColors.blue).alpha(0.2).rgbString(),
      borderColor: chartColors.blue,
      pointBackgroundColor: chartColors.blue,
      data: [
        95,
        80,
        85,
        90,
        89,
        87,
        95
      ]
    }, ]
  },
  options: {
    legend: {
      position: 'top',
      labels: {
        fontColor: 'white'
      }
    },
    title: {
      display: true,
      text: 'Curent level vs goal',
      fontColor: 'white'
    },
      maintainAspectRatio: false,
    scale: {
      ticks: {
        beginAtZero: true,
        fontColor: 'white', // labels such as 10, 20, etc
        showLabelBackdrop: false // hide square behind text
      },
      pointLabels: {
        fontColor: 'white' // labels around the edge like 'Running'
      },
      gridLines: {
        color: 'rgba(255, 255, 255, 0.2)'
      },
      angleLines: {
        color: 'white' // lines radiating from the center
      }
    }
  }
};

// A plugin to draw the background color
Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = '#303032';
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
})

window.myRadar = new Chart(document.getElementById("canvas"), config);
问题是，在某种意义上，我无法让它们两者一起工作，如果我添加新行（标签和值），它将更新图表，我试图用来替换图表代码中的数据部分我创建的变量（名称和数字），但是没有用。另外，我计划将其与d3一起使用，而不仅是chart.js，还添加了新列，它的工作方式是否相同？

我有一个Google工作表，其中包含两个简单的列，一个标签，另一个是值。我成功将其转换为json，并使用以下js $ .getJSON（“ https：// ...

Answer 1

请注意，jQuery.getJSON()是异步执行的。因此，只有在可用数据并将其处理为适合您的图表的格式后，才应创建图表。如果将负责创建图表的代码放在jQuery.getJSON()成功处理程序（回调函数）中，则可以这样做，如下所示。