我正在尝试使用时间序列数据创建带有样条图和散点图的组合图表。时间序列采用时间戳。我不知道为什么，但没有错误消息。尽管样条曲线呈现，但我没有看到任何散点图。
<强> js fiddle:
var colors = ["#e74c3c", "#f4a582", "#92c5de", "#2980b9"];
Highcharts.chart('container', {
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
legend: {
enabled: false
},
tooltip: {
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
formatter: function() {
var s = '<b>' + moment(this.x).format('MMM Do') + '</b>';
$.each(this.points, function() {
s += '<br/>' +
'<tr><td class = "tooltipvalue" style="color: ' + '#00000' + '">' +
this.series.name + ': ' +
this.y.toFixed(1) +
'</td></tr>';
});
return s;
},
shared: true
},
xAxis: {
gridLineWidth: 0,
type: 'datetime',
tickPositions: [1454329239000, 1465906839000, 1468844439000, 1469708439000, 1474892439000, 1476879639000, 1478607639000],
labels: {
style: {
fontSize: '0.75em'
},
formatter: function() {
return Highcharts.dateFormat('%b %e', this.value);
}
},
title: {
text: 'x-axis',
align: 'high',
offset: 0,
rotation: 0,
y: -14
},
plotBands: [{
from: new Date('2016/02/01').getTime(),
to: new Date('2016/06/14').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'oo',
style: {
color: '#606060'
}
}
}, { // Light air
from: new Date('2016/07/18').getTime(),
to: new Date('2016/07/28').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'Cv',
style: {
color: '#606060'
}
}
}, { // Light air
from: new Date('2016/09/26').getTime(),
to: new Date('2016/10/19').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'abc',
style: {
color: '#606060'
}
}
}],
},
yAxis: {
gridLineWidth: 0,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + "%";
},
},
lineWidth: 1,
// lineColor:'black'
title: {
text: 'y-axis',
align: 'middle'
},
plotLines: [{
color: 'silver',
width: 0.7,
value: 50,
zIndex: 4
}]
},
series: [{
type: 'spline',
name: 'Combined forecasts one',
identifier: 'cc',
method: 'PollyVote Combined forecasts',
color: colors[3],
data: [[1451862000000,52.2],[1451948400000,52.2],[1452034800000,52.2],[1452121200000,52.2],[1452207600000,52.2],[1452294000000,52.2],[1452380400000,52.2],[1452466800000,52.2],[1452553200000,52.2],[1452639600000,52.2],[1452726000000,52.2],[1452812400000,52.2],[1452898800000,52.2],[1452985200000,52.2],[1453071600000,52.2],[1453158000000,52.2],[1453244400000,52.2],[1453330800000,52.2],[1453417200000,52.2],[1453503600000,52.2],[1453590000000,52.2],[1453676400000,52.2],[1453762800000,52.2],[1453849200000,52.2]],
lineWidth: 3,
marker: {
symbol: 'circle'
}
},
{
type: 'spline',
name: 'Combined forecasts Two',
identifier: 'tt',
method: 'PollyVote Combined forecasts',
color: colors[0],
data: [[1451862000000,49.9],[1451948400000,49.9],[1452034800000,49.8],[1452121200000,49.5],[1452207600000,49.4],[1452294000000,49.3],[1452380400000,49.2],[1452466800000,49.6],[1452553200000,49.6],[1452639600000,49.6],[1452726000000,49],[1452812400000,48.7],[1452898800000,48.7],[1452985200000,48.7],[1453071600000,48.7],[1453158000000,48.6],[1453244400000,48.6],[1453330800000,48.6],[1453417200000,48.6],[1453503600000,48.6],[1453590000000,48.6],[1453676400000,48.6],[1453762800000,48.7],[1453849200000,48.8],[1453935600000,48.8],[1454022000000,48.7]],
lineWidth: 3,
marker: {
symbol: 'circle'
}
}, {
type: 'scatter',
name: 'Index Models one',
identifier: 'cc',
method: 'Index models',
color: colors[2],
data: [[1451862000000,49.9],[1451948400000,49.9],[1452034800000,49.9],[1452121200000,49.9],[1452207600000,49.9],[1452294000000,49.9],[1452380400000,49.9],[1452466800000,49.9],[1452553200000,49.9],[1452639600000,49.9],[1452726000000,49.9],[1452812400000,51.6],[1452898800000,51.6],[1452985200000,51.6],[1453071600000,51.6],[1453158000000,51.6],[1453244400000,51.6],[1453330800000,51.6],[1453417200000,51.6],[1453503600000,51.6],[1453590000000,51.6],[1453676400000,51.6],[1453762800000,51.6],[1453849200000,51.6],[1453935600000,51.6],[1454022000000,51.6]]
},
{
type: 'scatter',
name: 'Index Models Two',
identifier: 'tt',
method: 'Index models',
color: colors[1],
data: [[1451862000000,50.1],[1451948400000,50.1],[1452034800000,50.1],[1452121200000,50.1],[1452207600000,50.1],[1452294000000,50.1],[1452380400000,50.1],[1452466800000,50.1],[1452553200000,50.1],[1452639600000,50.1],[1452726000000,50.1],[1452812400000,48.4],[1452898800000,48.4],[1452985200000,48.4],[1453071600000,48.4],[1453158000000,48.4],[1453244400000,48.4],[1453330800000,48.4],[1453417200000,48.4],[1453503600000,48.4],[1453590000000,48.4],[1453676400000,48.4],[1453762800000,48.4],[1453849200000,48.4],[1453935600000,48.4]]
}
]
});
最佳答案
只需从全局空间中删除启用 false 的标记即可解决问题
var 颜色 = ["#e74c3c", "#f4a582", "#92c5de", "#2980b9"];
Highcharts.chart('container', {
legend: {
enabled: false
},
tooltip: {
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
formatter: function() {
var s = '<b>' + moment(this.x).format('MMM Do') + '</b>';
$.each(this.points, function() {
s += '<br/>' +
'<tr><td class = "tooltipvalue" style="color: ' + '#00000' + '">' +
this.series.name + ': ' +
this.y.toFixed(1) +
'</td></tr>';
});
return s;
},
shared: true
},
xAxis: {
gridLineWidth: 0,
type: 'datetime',
tickPositions: [1454329239000, 1465906839000, 1468844439000, 1469708439000, 1474892439000, 1476879639000, 1478607639000],
labels: {
style: {
fontSize: '0.75em'
},
formatter: function() {
return Highcharts.dateFormat('%b %e', this.value);
}
},
title: {
text: 'x-axis',
align: 'high',
offset: 0,
rotation: 0,
y: -14
},
plotBands: [{
from: new Date('2016/02/01').getTime(),
to: new Date('2016/06/14').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'oo',
style: {
color: '#606060'
}
}
}, { // Light air
from: new Date('2016/07/18').getTime(),
to: new Date('2016/07/28').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'Cv',
style: {
color: '#606060'
}
}
}, { // Light air
from: new Date('2016/09/26').getTime(),
to: new Date('2016/10/19').getTime(),
color: 'rgb(243, 243, 243)',
zindex: 0,
label: {
text: 'abc',
style: {
color: '#606060'
}
}
}],
},
yAxis: {
gridLineWidth: 0,
allowDecimals: false,
labels: {
enabled: true,
formatter: function() {
return this.value + "%";
},
},
lineWidth: 1,
// lineColor:'black'
title: {
text: 'y-axis',
align: 'middle'
},
plotLines: [{
color: 'silver',
width: 0.7,
value: 50,
zIndex: 4
}]
},
series: [{
type: 'spline',
name: 'Combined forecasts one',
identifier: 'cc',
method: 'PollyVote Combined forecasts',
color: colors[3],
data: [
[1451862000000, 52.2],
[1451948400000, 52.2],
[1452034800000, 52.2],
[1452121200000, 52.2],
[1452207600000, 52.2],
[1452294000000, 52.2],
[1452380400000, 52.2],
[1452466800000, 52.2],
[1452553200000, 52.2],
[1452639600000, 52.2],
[1452726000000, 52.2],
[1452812400000, 52.2],
[1452898800000, 52.2],
[1452985200000, 52.2],
[1453071600000, 52.2],
[1453158000000, 52.2],
[1453244400000, 52.2],
[1453330800000, 52.2],
[1453417200000, 52.2],
[1453503600000, 52.2],
[1453590000000, 52.2],
[1453676400000, 52.2],
[1453762800000, 52.2],
[1453849200000, 52.2]
],
lineWidth: 3,
marker: {
enabled: false
}
},
{
type: 'spline',
name: 'Combined forecasts Two',
identifier: 'tt',
method: 'PollyVote Combined forecasts',
color: colors[0],
data: [
[1451862000000, 49.9],
[1451948400000, 49.9],
[1452034800000, 49.8],
[1452121200000, 49.5],
[1452207600000, 49.4],
[1452294000000, 49.3],
[1452380400000, 49.2],
[1452466800000, 49.6],
[1452553200000, 49.6],
[1452639600000, 49.6],
[1452726000000, 49],
[1452812400000, 48.7],
[1452898800000, 48.7],
[1452985200000, 48.7],
[1453071600000, 48.7],
[1453158000000, 48.6],
[1453244400000, 48.6],
[1453330800000, 48.6],
[1453417200000, 48.6],
[1453503600000, 48.6],
[1453590000000, 48.6],
[1453676400000, 48.6],
[1453762800000, 48.7],
[1453849200000, 48.8],
[1453935600000, 48.8],
[1454022000000, 48.7]
],
lineWidth: 3,
marker: {
enabled: false
}
}, {
type: 'scatter',
name: 'Index Models one',
identifier: 'cc',
method: 'Index models',
color: colors[2],
data: [
[1451862000000, 49.9],
[1451948400000, 49.9],
[1452034800000, 49.9],
[1452121200000, 49.9],
[1452207600000, 49.9],
[1452294000000, 49.9],
[1452380400000, 49.9],
[1452466800000, 49.9],
[1452553200000, 49.9],
[1452639600000, 49.9],
[1452726000000, 49.9],
[1452812400000, 51.6],
[1452898800000, 51.6],
[1452985200000, 51.6],
[1453071600000, 51.6],
[1453158000000, 51.6],
[1453244400000, 51.6],
[1453330800000, 51.6],
[1453417200000, 51.6],
[1453503600000, 51.6],
[1453590000000, 51.6],
[1453676400000, 51.6],
[1453762800000, 51.6],
[1453849200000, 51.6],
[1453935600000, 51.6],
[1454022000000, 51.6]
]
},
{
type: 'scatter',
name: 'Index Models Two',
identifier: 'tt',
method: 'Index models',
color: colors[1],
data: [
[1451862000000, 50.1],
[1451948400000, 50.1],
[1452034800000, 50.1],
[1452121200000, 50.1],
[1452207600000, 50.1],
[1452294000000, 50.1],
[1452380400000, 50.1],
[1452466800000, 50.1],
[1452553200000, 50.1],
[1452639600000, 50.1],
[1452726000000, 50.1],
[1452812400000, 48.4],
[1452898800000, 48.4],
[1452985200000, 48.4],
[1453071600000, 48.4],
[1453158000000, 48.4],
[1453244400000, 48.4],
[1453330800000, 48.4],
[1453417200000, 48.4],
[1453503600000, 48.4],
[1453590000000, 48.4],
[1453676400000, 48.4],
[1453762800000, 48.4],
[1453849200000, 48.4],
[1453935600000, 48.4]
],
marker: {
radius: 5,
symbol: 'circle'
}
}
]
});
关于javascript - 如何使用时间序列数据绘制带有highcharts的散点图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39980443/