軸とグリッド線を非表示にするハイチャート

80

ハイチャートチャートの軸とグリッド線を完全に非表示にしようとしています。これまで、線の幅を0に設定しようとしましたが、うまくいきませんでした。

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

軸線/目盛りとグリッド線をグローバルに無効にして「プレーン」プロットを作成することは可能ですか？

charts highcharts

— アレックス
ソース

2

ここだY軸を非表示にする方法

— ダンDascalescu

150

追加するだけです

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

xAxis定義に。

バージョン4.1.9以降、簡単にaxis属性を使用できますvisible。

xAxis: {
    visible: false,
}

— dgw
ソース

@dgwこれにより、x軸は透明になりますが、それでもデータの下の物理スペースを占有します。高さを0にする方法はありますか？

— トレバーバーナム

19

それは少しやり過ぎです。HighChartsは、軸を表示するかどうかを切り替える「visible」と呼ばれる単純なプロパティを実装する必要があります。機能リクエストとして投稿しました。ここで投票できます。

— ダンダスカレスク2013

2

minorGridLineWidth私が探していたあいまいなプロパティでした。ありがとう！

— jetcom 2014年

1

@ TrevorBurnham-目盛りのある物理スペースを削除するには、chart.spacing = [0、0、0、0]を設定する必要があります（または、必要がない場合は、chart.spacingLeftなどの軸をゼロに設定するだけです。すべての間隔をなくすため）。それは私にとってこの質問の欠けている部分でした。

— マシューディーン

1

tickLength: 0折れ線グラフの目盛りを非表示にするために必要なのはそれだけのようでした。

— ハートリーブロディ

74

yAxisあなたのためにも必要になります：

gridLineColor: 'transparent',

— ザックモリス
ソース

1

あなたも設定する必要がありますかtitle.textにnull？とにかく、HighChartsは、軸を表示するかどうかを切り替える「visible」と呼ばれる単純なプロパティを実装する必要があります。機能リクエストとして投稿しました。ここで投票できます。

— ダンダスカレスク2013

に設定すると、削除する他の軸がまだある場合、グリッド線が途中で削除さgridLineColorれるtransparent可能性があります。この例を参照してください。

— ダンダスカレスク2013

28

Highchartsのv4.9よりも大きいバージョンを使用visible: falseしている場合は、xAxisおよびyAxis設定で使用できます。

例：

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

— onetwo12
ソース

6

これがベストアンサーです

— micapam 2017

21

yAxisのグリッド線を次のように非表示にすることもできます。

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

— Shweta Bhagwat
ソース

5

私はなんとか私をオフにすることができました

       lineColor: 'transparent',
       tickLength: 0

— ベン
ソース

2

構成オブジェクトに触れたくない場合は、cssでグリッドを非表示にします。

.chart-container .highcharts-grid {
   display: none;
}

— イランレイエス
ソース

0

これは私にとって常にうまくいきました：

yAxes: [{
         ticks: {
                 display: false;
                },

— 0365クリス
ソース