ハイチャートに同じxとyの複数のデータを表示する

aron ar

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
      }
ppotaczek

たとえば、異なる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]

編集
0

コメントを追加

0

関連記事

分類Dev

ハイチャート:同じx軸に複数の線を追加する方法

分類Dev

同じデータの複数のシリーズをExcelチャートに表示する

分類Dev

xaxisデータラベルをバーのハイチャートと同じ色にする

分類Dev

ハイチャートの凡例複数のチャートデータカテゴリを表示する方法は?

分類Dev

json データに基づいて複数の動的ハイチャートを表示する方法

分類Dev

同じページに複数のGoogleチャートを表示する

分類Dev

同じビューに複数のチャートを表示する

分類Dev

同じX位置のシノビチャートに複数の十字線のターゲット円を表示する(iOS)

分類Dev

ハイチャート:棒グラフの同じ線上にデータラベルを配置する

分類Dev

ハイストックチャートで複数のシリーズタイプを設定すると、データが間違って表示されます

分類Dev

複数の関連するシリーズを含むハイチャートのy軸の表示/非表示

分類Dev

データの表示に失敗するハイチャート

分類Dev

グーグルチャートで同じxとyを持ついくつかのデータポイントからの情報でツールチップを表示する方法

分類Dev

x軸とy軸の両方のハイチャートのデータを更新するにはどうすればよいですか?

分類Dev

mvc5の同じページに複数のチャートを表示する方法

分類Dev

ハイチャート-複数のレベルと複数のレイアウトのツリーマップで子ラベルを非表示にする

分類Dev

デコレータで同じタイプの複数の例外をキャッチする方法

分類Dev

ハイチャートでX軸に日付を表示し、y軸に他の列を表示する方法

分類Dev

ハイチャートのPieTooltipにデータを追加する

分類Dev

JasperreportsのJRBeanCollectionDatasourceを使用して、同じタイプでデータシリーズが異なる複数のチャートを作成する方法

分類Dev

clientId値に基づいて同じページに複数のハイチャートがありますか?

分類Dev

ハイチャートX軸にデータを追加する

分類Dev

同じヘルムチャートで複数のポッドをデプロイする方法は?

分類Dev

グラフのハイチャートに最初と最後のy軸ラベルのみを表示する

分類Dev

複数のy軸と動的更新のハイチャート

分類Dev

JavaScriptの日付をハイチャートのX軸に表示する

分類Dev

特定のデータセットを使用してハイチャートの x 軸ラベルの下に y 軸の値を追加する方法

分類Dev

ハイチャート:チャートにボタンを追加して、複数の軸を表示または非表示にします

分類Dev

ハイチャート円グラフホバーに複数のタイトルを追加する

Related 関連記事

  1. 1

    ハイチャート:同じx軸に複数の線を追加する方法

  2. 2

    同じデータの複数のシリーズをExcelチャートに表示する

  3. 3

    xaxisデータラベルをバーのハイチャートと同じ色にする

  4. 4

    ハイチャートの凡例複数のチャートデータカテゴリを表示する方法は?

  5. 5

    json データに基づいて複数の動的ハイチャートを表示する方法

  6. 6

    同じページに複数のGoogleチャートを表示する

  7. 7

    同じビューに複数のチャートを表示する

  8. 8

    同じX位置のシノビチャートに複数の十字線のターゲット円を表示する(iOS)

  9. 9

    ハイチャート:棒グラフの同じ線上にデータラベルを配置する

  10. 10

    ハイストックチャートで複数のシリーズタイプを設定すると、データが間違って表示されます

  11. 11

    複数の関連するシリーズを含むハイチャートのy軸の表示/非表示

  12. 12

    データの表示に失敗するハイチャート

  13. 13

    グーグルチャートで同じxとyを持ついくつかのデータポイントからの情報でツールチップを表示する方法

  14. 14

    x軸とy軸の両方のハイチャートのデータを更新するにはどうすればよいですか?

  15. 15

    mvc5の同じページに複数のチャートを表示する方法

  16. 16

    ハイチャート-複数のレベルと複数のレイアウトのツリーマップで子ラベルを非表示にする

  17. 17

    デコレータで同じタイプの複数の例外をキャッチする方法

  18. 18

    ハイチャートでX軸に日付を表示し、y軸に他の列を表示する方法

  19. 19

    ハイチャートのPieTooltipにデータを追加する

  20. 20

    JasperreportsのJRBeanCollectionDatasourceを使用して、同じタイプでデータシリーズが異なる複数のチャートを作成する方法

  21. 21

    clientId値に基づいて同じページに複数のハイチャートがありますか?

  22. 22

    ハイチャートX軸にデータを追加する

  23. 23

    同じヘルムチャートで複数のポッドをデプロイする方法は?

  24. 24

    グラフのハイチャートに最初と最後のy軸ラベルのみを表示する

  25. 25

    複数のy軸と動的更新のハイチャート

  26. 26

    JavaScriptの日付をハイチャートのX軸に表示する

  27. 27

    特定のデータセットを使用してハイチャートの x 軸ラベルの下に y 軸の値を追加する方法

  28. 28

    ハイチャート:チャートにボタンを追加して、複数の軸を表示または非表示にします

  29. 29

    ハイチャート円グラフホバーに複数のタイトルを追加する

ホットタグ

アーカイブ