我正在尝试使用 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>最佳答案
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
关于javascript - Google 电子表格的 Highchart 系列数据格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30376830/