gpt4 book ai didi

javascript - Google 电子表格的 Highchart 系列数据格式

转载 作者:行者123 更新时间:2023-12-03 10:05:30 25 4
gpt4 key购买 nike

我正在尝试使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com