Datetime 日期时间值和打印数据点之间的样条曲线图的问题
任何能够帮助解决以下问题的人: 尝试用四个数据系列绘制图表,其中两个是散点数据系列,一个是样条数据系列。样条曲线的用途只是在图表上的特定点之间画一条线,而不是将所有点连接在一起。以下是我目前的代码:Datetime 日期时间值和打印数据点之间的样条曲线图的问题,datetime,highcharts,spline,Datetime,Highcharts,Spline,任何能够帮助解决以下问题的人: 尝试用四个数据系列绘制图表,其中两个是散点数据系列,一个是样条数据系列。样条曲线的用途只是在图表上的特定点之间画一条线,而不是将所有点连接在一起。以下是我目前的代码: $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
ordinal: false,
labels: {
formatter: function() {
return Highcharts.dateFormat('%H', this.value);
}
}
},
yAxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
gridLineWidth: 0,
step: 1,
title: '',
labels: {
style: {
color: '#6D869F',
fontSize: '9px',
}
},
},
tooltip: {
formatter: function() {
return ''+
this.x +' cm, '+ this.y +' kg';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'sleep time',
marker: {
symbol: 'circle',
},
color: '#81c65b',
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6]]
},
{
name: 'wakeup time',
marker: {
symbol: 'circle',
fillColor: '#76a4fb',
},
data: [[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 2, 09, 30), 6]],
},
{
name: 'sleep time over average',
color: 'rgba(119, 152, 191, .5)',
marker: {
symbol: 'square',
fillColor: '#000',
},
data: [[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 1, 21, 20), 4]]
},
{
name: '',
legend: {
enabled: false,
},
color: '#d62a9c',
type: 'spline',
marker: {
enabled: false,
},
data: [[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 1, 20, 30), 3],
[Date.UTC(2012, 1, 2, 07, 40), 3],
[Date.UTC(2012, 1, 1, 21, 20), 4],
[Date.UTC(2012, 1, 2, 07, 30), 4],
[Date.UTC(2012, 1, 1, 21, 45), 5],
[Date.UTC(2012, 1, 2, 08, 20), 5],
[Date.UTC(2012, 1, 1, 22, 00), 6],
[Date.UTC(2012, 1, 2, 09, 30), 6]]
}]
});
});
});
我现在的问题是,在样条曲线系列中,如果我在元素之间添加一个空值,以防止绘制两点之间的直线,那么整个绘图就会变得混乱。这样做的目的是只画一条线,使垂直于同一条线上的点连接在一起,例如,在本例中是“睡眠时间”和“唤醒时间”。比如说,
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0], null,
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1], null,
[Date.UTC(2012, 1, 1, 23, 40), 2],
...
您可以在此处尝试该代码。请尝试以下操作
data: [
[Date.UTC(2012, 1, 1, 22, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), 0],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 20, 15), 1],
[Date.UTC(2012, 1, 2, 07, 10), 1],
[Date.UTC(2012, 1, 2, 08, 15), null],
[Date.UTC(2012, 1, 1, 23, 40), 2],
[Date.UTC(2012, 1, 2, 09, 20), 2],
[Date.UTC(2012, 1, 2, 08, 15), null],
...
]
正如您所看到的,您必须传递一个数组,该数组的第一个值必须是任何日期
非常感谢……工作如期,但我不知道:)花了几个小时对此感到沮丧。。。