Google 电子表格的 Highchart 系列数据格式答案

【问题标题】：Highchart Series Data Format for Google SpreadsheetGoogle 电子表格的 Highchart 系列数据格式
【发布时间】：2015-08-03 07:17:21
【问题描述】：

我正在尝试使用 Highcharts Series 函数来创建组合条形图/折线图，但我无法仅显示该系列。 API 中没有关于在使用系列时如何格式化来自 Google 电子表格的数据，所以我尝试了一下，但图表没有显示：

$(function() {
  Highcharts.setOptions({
    chart: {
      backgroundColor: '#fff',
      shadow: false,
      width: null,
      height: null
    }
  });
  $('#ms-96-enrollment').highcharts({
    series: [{
      type: 'bar',
      data: [{
        googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
        startColumn: 0,
        endColumn: 1,
        startRow: 0,
        googleSpreadsheetWorksheet: 7
      }],
    }]
  });
});

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<div>
  <div id="ms-96-enrollment"></div>

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

Highcharts 有两个“数据”有点误导 - 串联和顶层。第一个用于 javascript 点数组，而后者用于方便添加现有数据集 (http://api.highcharts.com/highcharts#data)

Google 电子表格也是如此

$('#ms-96-enrollment').highcharts({
  chart: {
    type: 'bar'
  },
  data: {
    googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
    startColumn: 0,
    endColumn: 1,
    startRow: 0,
    googleSpreadsheetWorksheet: 7
  },
  title: {
    text: 'My google data'
  },
  yAxis: {},
  xAxis: {
    labels: {
      enabled: true,
    }
  }
});

这是基于您的数据的示例http://plnkr.co/edit/aIqMVcaeyYEbHcdxoMaT

更新

如果您需要显示多个系列，请添加额外的列并指定系列：

data: {
  googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
  startColumn: 0,
  endColumn: 2,
  startRow: 0,
  googleSpreadsheetWorksheet: 7
}

...

series: [{
  type: 'bar'
}, {
  type: 'line'
}]

这是更新后的示例http://plnkr.co/edit/UQprlugBtUXQX9OffUm4?p=preview

【讨论】：

所以如果只是一组数据，我知道如何格式化数据，但我想添加几个数据集，以便在 [highcharts.com/docs/chart-and-series-types/… 图表中以不同方式显示每个数据集。
你明白了！连续 2 天回答 2 个。我应该直接开始给你发消息。
欢迎 :-) 顺便说一句，如果您的系列具有不同的单位，您可以添加多个 X 或 Y 轴并从系列中引用它们，就像您对普通点数据系列所做的那样 (highcharts.com/demo/combo-multi-axes)