将Google Sheet JSON数据读入Chart.js [英] Read google sheet json data into chartjs

问题描述

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

I have a google sheet with simple two colomns, one labels and the other is values. I succeeded to convert it into json, and using such values in tables using the following 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中使用它，我设法使其起作用，但仅适用于硬编码数据

And want to use it in a radar chart.js, which I managed to make it work, but only with hardcoded data

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，而且还添加了新列，它的工作方式是否相同?

The problem is I can't get them both to work together, in a sense, if I add a new row (label and value), it will update chart, I tried to substitute the data part in the chart code with the variables I created (names and numbers), but it didn't work. Also, I'm planning to use it with d3 as well not just chart.js, as well as adding new columns, does it work the same way?

推荐答案

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

Please remind that jQuery.getJSON() is executed asynchronously. Therefore you should create the chart only once the data is available and processed to a format suitable for your chart. This can be done if you place code responsible for chart creation inside the jQuery.getJSON() success handler (callback function) as follows.

$.getJSON("https://spreadsheets.google.com/feeds/list/1GnakUnNQvFXjuzMSPnBpU9eufb4SooQLGL2oFc3lfAs/od6/public/values?alt=json", data => {
  var labels = [];
  var numbers = [];
  data.feed.entry.forEach(e => {
    labels.push(e['gsx$names']['$t']);
    numbers.push(Number(e['gsx$numbers']['$t']));
  });
  new Chart(document.getElementById('myChart'), {
    type: 'radar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Current level',
        data: numbers,
        backgroundColor: 'rgba(253, 48, 76, 0.2)',
        borderColor: 'rgb(253, 48, 76)',
        pointBackgroundColor: 'rgb(253, 48, 76)'
      }]
    },
    options: {
      tooltips: {
        callbacks: {
          title: (tooltipItem, data) => data.labels[tooltipItem[0].index]
        }
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

这篇关于将Google Sheet JSON数据读入Chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！