Question

我目前正在尝试使用Google工作表中的数据来创建高图。但是，即使将表单公开并将其发布到Web，它仍然不会生成数据。我不确定我在这里做错了什么，任何帮助都会很感激。

代码段在这里：

Highcharts.chart('container', {

chart: {
    polar: true,
    type: 'line'
},

title: {
    text: 'Objectives',
},

pane: {
    size: '80%'
},

xAxis: {
    categories: ['Financial Cost', 'Health Damages', 'Water Usage'],
    tickmarkPlacement: 'on',
    lineWidth: 0
},

yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0
},

tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},

legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
},

series: [{
    name: 'Design 2',
    data: {googleSpreadsheetKey: 
          '1QwJuLpRWeXTTZ3k0zaUeCncHY1sRu6FxBnmlgsPw9pE',
           },
    pointPlacement: 'on'
}]

});

Google表格链接为：https://docs.google.com/spreadsheets/d/1QwJuLpRWeXTTZ3k0zaUeCncHY1sRu6FxBnmlgsPw9pE/edit?usp=sharing

Answer 1

此代码从工作表中获取数据作为数组/对象。但它需要你的客户端jQuery。

请注意，它包含在一个承诺中。这意味着在返回数据之前，图表不会呈现。以下是基于此jsbin

的数据的sheet

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

var firstSheet = function(){
  var spreadsheetID = "1qZTQonzIrfVQ2rSPtschek7EvAbxwDgOCz7sf7wbkjU";
  var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID +"/1/public/values?alt=json";
  return new Promise((resolve,reject)=>{
    $.getJSON(url, (data)=>{
        let result = data.feed.entry
        resolve(result)
   });
  })
}

firstSheet().then(function(data){
  let series = [];
  let newData = [];

  data.forEach(item => {

    let amount = Number(item.gsx$amount.$t); 
    //gsx$amount = sheet column header name - The api call converts column header names to lower case and strips spaces 
    newData.push(amount)
  })
  series.push({name: 'somedata', data: newData })
  renderChart(series)
})

const renderChart = (data)=>{

Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    series: data
});
}

Answer 2

您将data属性放在了错误的位置。它应该是options对象的属性（最高级别）：

Highcharts.chart('container', {

  data: {
    googleSpreadsheetKey: '1QwJuLpRWeXTTZ3k0zaUeCncHY1sRu6FxBnmlgsPw9pE',
    parsed: function(options) {
      console.log(options);
    }
  },

现场演示： http://jsfiddle.net/kkulig/Lc02r8sx/

正如您在上面的示例中所看到的，数据已成功获取（console.log函数中的parsed。）

现在您需要准备它 - 从工作表中获取字符串值，而Highcharts只接受数字作为y值。

API参考： https://api.highcharts.com/highcharts/data.parsed

使用公共Google电子表格的Highcharts不起作用

2 个答案: