it-swarm.com.de

Highchart - eine y-Achse anzeigen/ausblenden, ohne die Serie zu verbergen

Ich arbeite mit Highchart . Ich habe ein Diagramm mit mehreren Serien, in dem jede Serie ihre eigene Y-Achse hat.

ziemlich genau wie diese (jsfiddle)

wenn wir auf das Legendenelement für eine Serie klicken, werden diese und die zugehörige Y-Achse ausgeblendet (Mithilfe von showEmpty:false konnte auch der Name der Achsen ausgeblendet werden).

Was ich zu erreichen versuche, ist, die y-Achse einer bestimmten Serie zu verbergen, ohne die Serie selbst zu verbergen.

Ich habe versucht, es zu verbergen, indem ich die showAxis-Eigenschaft folgendermaßen geändert habe: 

serie.yAxis.showAxis = false;

aber es geht nicht ... Wer weiß, wie ich das machen soll?

BEARBEITEN: Ich habe es geschafft, den Text so zu bearbeiten, dass ich den Achsentitel entfernen kann, indem der Text auf null gesetzt wird, aber er reicht nicht aus, um die gesamte Achse und ihre Werte auszublenden.

so habe ich den Text bearbeitet: 

serie.yAxis.axisTitle.attr({
            text: null
        });
23
Guian

Highcharts 4.1.9+

Seit 4.1.9 gibt es eine Option Axis.visible , mit der eine Achse ein-/ausgeblendet werden kann, Demo: http://jsfiddle.net/3sembmfo/36/

Ältere Versionen von Highcharts

Es ist eine neue Funktion für Highcharts 3.0, mit der Achsen in Echtzeit aktualisiert werden können: chart.yAxis[0].update(object) -, da das Objekt die gleichen Optionen hat wie das Erstellen von Diagrammen. Zum Beispiel:

        chart.yAxis[0].update({
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        });

Und jsFiddle: http://jsfiddle.net/39xBU/2/

EDIT:

Verwenden Sie den folgenden Ausschnitt, um die Achse auszublenden/anzuzeigen, indem Sie einfach axis.hide() und axis.show() aufrufen. Live-Demo: http://jsfiddle.net/39xBU/183/

(function (HC) {
    var UNDEFINED;
    HC.wrap(HC.Axis.prototype, 'render', function (p) {
        if (typeof this.visible === 'undefined') {
            this.visible = true;
        }
        if(this.visible) {
            this.min = this.prevMin || this.min;
            this.max = this.prevMax || this.max;
        } else {
            this.prevMin = this.min;
            this.prevMax = this.max;
            this.min = UNDEFINED;
            this.max = UNDEFINED;
        }

        this.hasData = this.visible;

        p.call(this);
    });

    HC.Axis.prototype.hide = function () {
        this.visible = false;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };

    HC.Axis.prototype.show = function () {
        this.visible = true;
        this.render();

        HC.each(this.plotLinesAndBands, function (plotLine) {
            plotLine.render();
        });
    };
})(Highcharts);
48
Paweł Fus

Für neuere Versionen (ich verwende 6.2.0) hat die Eigenschaft yAxis einen Parameter mit dem Namen gridLineWidth . Setzen Sie es einfach auf 0 und die Gitter für diese Achse verschwinden. In dieser JSFiddle gibt es ein Beispiel dafür.

Wenn Sie sich jedoch im Stilmodus befinden, ist dies schwieriger. Hier müssen Sie ein className für die Zielachse setzen und dann das CSS wie folgt einstellen:

.highcharts-yaxis-grid {
    &.right-axis {
      path {
        stroke: none;
      }
    }
  }

Dies führt beispielsweise dazu, dass die Gitter der Achse mit einer className als rechte Achse ausgeblendet werden. Dies ermöglicht verschiedene Stile für die Mehrfachachse.

0
Tito Leiva

Wir können das Yaxis-Label ausblenden, ohne die y-Achse auszublenden, ohne die Serie zu verstecken, indem wir den leeren String wie folgt zurückgeben: 

yAxis: {
       title: '',
       labels: {
                formatter: function() {
                    return '';
                },
                style: {
                    color: '#4572A7'
                }
        }

}, 

0
Jagadeesh

Es ist eigentlich einfacher geworden. Sie müssen lediglich das yAxis-Titelattribut auf false setzen:

yAxis: {
   title: false
},

Hier ist ein Beispiel: jsfiddle Beispiel

0
GeoffreyMahugu