0
Ich versuche, ein kombiniertes Diagramm mit Spline und Punktdiagramm mit Zeitserien Daten zu erstellen. Die Zeitreihe befindet sich im Zeitstempel. Ich bin mir nicht sicher warum, aber es gibt keine Fehlermeldung. und ich sehe kein Streudiagramm, obwohl Spline rendert.Wie zeichne Scatter-Diagramm mit Highcharts mit Zeitreihen Daten
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]]
}
]
});
Sie können den Marker auch für einen bestimmten Serientyp deaktivieren. Daher müssen Sie den Marker für jede Streustrahlserie nicht aktivieren. https://jsfiddle.net/s9877v1g/6/ – morganfree