我尝试在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/

10-12 00:35
查看更多