react-nativeでhighchartを使用して、状態から6つのデータを表示しようとすると、表示されたデータが機能します。ただし、6つのデータのXとYは同じであるため、データは表示されますが、スタックしているため、データは1つしかないように見えます(Xはデータが投稿を取得する時刻であり、Yはデータが投稿を取得する日です)役職)。データをすべてグラフに表示する方法はありますか?
これは次のようなチャートです:
これは私のハイチャート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
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加