我尝试在react-native中使用highchart来显示状态中的6个数据,并且它可以显示所显示的数据。但是因为这6个数据的X和Y相同,所以显示的数据是堆叠的,因此看起来只有一个数据(X是数据获得发布的时间,Y是数据获得发布的日期。发布)。有什么办法可以使数据全部显示在图表中。
这是图表的样子:
这是我的highchart conf:
var conf= {
chart: {
type: 'scatter',
backgroundColor: '#233767',
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style:{
color:'white'
}
},
},
yAxis: {
type: 'datetime',
lineWidth: 1,
dateTimeLabelFormats: {
minute: '%H:%M'
},
labels: {
style:{
color:'white'
}
},
title: {
enabled: false
},
gridLineColor:'transparent'
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: false,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
Highcharts.dateFormat('%H:%M:%S', this.y);
},
},
credits: false,
exporting: false,
legend: {
itemStyle: {
color: '#FFFF',
fontWeight: 'bold'
}
},
title: false,
series: this.state.chartState
}
最佳答案
例如,您可以使用不同的radius
来区分点:
series: [{
data: [
[10, 10]
],
marker: {
radius: 10
}
}, {
data: [
[10, 10]
],
marker: {
radius: 5
}
}, ...]
现场演示: https://jsfiddle.net/BlackLabel/tm0v6fw4/
API引用: https://api.highcharts.com/highcharts/series.scatter.marker.radius
或使用不同比例的多轴:
series: [{
data: [
[10, 10]
]
}, {
data: [
[10, 10]
],
yAxis: 1
}, {
data: [
[10, 10]
],
yAxis: 2
}]
现场演示: https://jsfiddle.net/BlackLabel/qwj4mu7n/
API引用: https://api.highcharts.com/highcharts/yAxis
关于javascript - 在highchart中显示具有相同x和y的多个数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59962769/