我试图基于不规则时间而不是使用类别使用xAxis建立带有错误栏的样条曲线,但我遇到了一些麻烦。
这是一个示例:http : //jsfiddle.net/Zj2Lp/4/
知道如何实现吗?
先感谢您
代码在这里:
var chart;
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy',
},
title: {
text: 'Temperature vs Rainfall'
},
xAxis: [{
type: 'datetime'
}],
/*
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
*/
yAxis: [{ // Primary yAxis
labels: {
format: '{value} °C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
type: 'spline',
data: [
[Date.UTC(2014, 5, 10), 7.0],
[Date.UTC(2014, 5, 11), 26.5],
[Date.UTC(2014, 5, 12), 9.6]
],
tooltip: {
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
}
}, {
name: 'Temperature error',
type: 'errorbar',
data: [
[Date.UTC(2014, 5, 10), [6, 8]],
[Date.UTC(2014, 5, 11), [26.1, 27.8]],
[Date.UTC(2014, 5, 12), [7.6, 10.0]]
],
tooltip: {
pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
}
}]
});
问题是您data
在errorbar
系列中使用的格式。正确的格式是使用二维数组。不是像在代码中使用的三维数组。
您在该系列中的每一点都是:
[Date.UTC(2014, 5, 10), [6, 8]]
它应该是:
[Date.UTC(2014, 5, 10), 6, 8]
这是最后更新的errorbar
系列:
{
name: 'Temperature error',
type: 'errorbar',
data: [
[Date.UTC(2014, 5, 10), 6, 8],
[Date.UTC(2014, 5, 11), 26.1, 27.8],
[Date.UTC(2014, 5, 12), 7.6, 10.0]
],
tooltip: {
pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
}
}
这是更新的JFiddle以查看结果。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句