将Google Sheet JSON数据读入Chart.js

我有一个简单的两个列，一个标签，另一个是值的谷歌表。我成功将其转换为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);

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