javascript - 無効-HighCharts列グラフの凡例をクリックします

Question

「縦棒グラフ」のDRILL-DOWN効果を無効にしようとしています。誰か助けてもらえますか？これがFiddlehttp ://jsfiddle.net/D8Ez3/のサンプルコードです。

*ご覧のとおり、グラフの凡例はクリック可能です。すべてのアイテムをクリックするとチャートが空に戻るため、凡例のアイテムをクリックできないようにする必要があります。チャートのドリルダウンはありません。何か案は？

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'impact',
        type: 'column',
        margin: [0, 0, 0, 0],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        backgroundColor: null,
        events: {
            load: function (event) {
                console.log(this);
            }}},
    exporting: {
       buttons: { 
       exportButton: {
       enabled:false
    },
    printButton: {
        enabled:false
    }}},
credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ['Reporting Year']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Millions (mm)'
        }
    },
    legend: {
    enabled:false,
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 50,
        y: 30,
        floating: true,
        shadow: true
    },
    tooltip: {
        formatter: function () {
            return '' + this.x + ': ' + this.y + ' mm';
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            size: '95%',
            borderWidth: 0},
    point: {
                events: {
                    legendItemClick: function () {
                        return true; // <== returning false will cancel the
                        default action }}},
            allowPointSelect: false,
    },
    series: [{
        name: 'Yr 1',
        data: [23.7] }, 
    {
        name: 'Yr 2',
        data: [13.6] }, 
    {
        name: 'Yr 3',
        data: [49.9] }, 
    {
        name: 'Yr 4',
        data: [83.6] }]
      });

score 48 · Accepted Answer

あなたは近かった。それ以外の：

plotOptions: {
    column: {
        pointPadding: 0.2,
        size: '95%',
        borderWidth: 0
    },
    point: {
            events: {
                legendItemClick: function () {
                    return false; // <== returning false will cancel the default action
                }
            }
    },
    allowPointSelect: false,
},

あなたが欲しい：

plotOptions: {
    column: {
        pointPadding: 0.2,
        size: '95%',
        borderWidth: 0,
        events: {
            legendItemClick: function () {
                return false; 
            }
        }
    },
    allowPointSelect: false,
},

score 15 · Accepted Answer

また、パイを使用する場合は、次のことを行う必要があります。

    pie: {
       showInLegend: true,
       allowPointSelect: false,
       point:{
           events : {
            legendItemClick: function(e){
                e.preventDefault();
            }
           }
       }
   }

score 3 · Accepted Answer

これは、Highchartsグラフの凡例をクリックできないようにする方法です。特定の凡例をクリックすると、対応するスライスがグラフから消えるので、ビジネス要件に従ってグラフを永続化すると、凡例がクリックできなくなる場合があります。

  plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 1,
        },
        series: {
            events: {
                legendItemClick: function (e) {
                    e.preventDefault();
                }
            }
        }
    }

score 1 · Accepted Answer

ES6を使用している場合は、矢印関数を使用してさらに短くすることができます。これは、 DOM要素を指しているため、単にfalseを返すことができます...

{
  name: 'Name of this chart',
  type: 'line',
  lineWidth: 1,
  color: '#333333',
  events: {
    legendItemClick: () => false  // disable legend click
  },
  data: [1, 5, 10, 8, 19, 28, 0 , 12]
};

score 0 · Accepted Answer

これを実現する方法を示すJSFiddleは次のとおりです。

plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently ' +
                   **strong text**              visibility + '. Do you want to change that?')) {
                        return false;
                    }
                }
            }
        }
    }

score 0 · Accepted Answer

Highcharts JS APIドキュメント（v7.1.1）から

「デフォルトのアクションは、ポイントの表示を切り替えることです。これは、event.preventDefault（）を呼び出すことで防ぐことができます。」

だから、これは円グラフのために私のために働いたものです-

    plotOptions: {
        pie: {
            point: {
                events: {
                    legendItemClick: function (e) {
                        e.preventDefault();
                    }
                }
            }
        }
    }

score 0 · Accepted Answer

他の回答への便利な追加として、凡例のホバースタイルも無効にすることをお勧めします。

legend: {
    itemStyle: {
        cursor: 'default',
    },
    itemHoverStyle: {
        color: '#333333',
    }
},

参照：https ：//jsfiddle.net/oyps4fj6/

javascript - 無効-HighCharts列グラフの凡例をクリックします

7 に答える 7

Related

Reference