Подтвердить что ты не робот

Highchart - показать/скрыть ось y, не скрывая серию

Я работаю с Highchart. У меня есть граф с несколькими рядами, в котором каждая серия имеет свою ось Y.

в значительной степени подобен этому (jsfiddle)

когда мы нажимаем на элемент легенды для серии, он скрывает его и связанную ось y (использование showEmpty:false помогло скрывать также имя осей)

То, что я пытаюсь достичь, скрывает ось Y данной серии, не скрывая сама серию.

Я попытался скрыть его, изменив свойство showAxis следующим образом:

serie.yAxis.showAxis = false;

но это не сработает. Кто-нибудь знает, как я должен это делать?

EDIT: мне удалось отредактировать текст, чтобы удалить заголовок оси, установив текст в значение null, но его недостаточно, чтобы скрыть всю ось и ее значения.

вот что я сделал, чтобы отредактировать текст:

serie.yAxis.axisTitle.attr({
            text: null
        });
4b9b3361

Ответ 1

Highcharts 4.1.9 +

Начиная с версии 4.1.9, существует опция Axis.visible, которая может использоваться для отображения/скрытия оси, demo: http://jsfiddle.net/3sembmfo/36/

Старые версии Highcharts

Это новая функция для Highcharts 3.0, которая позволяет обновлять оси в реальном времени: chart.yAxis[0].update(object) - поскольку объект принимает те же параметры, что и для создания диаграммы. Например:

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

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

EDIT:

Используйте ниже фрагмент, чтобы скрыть/показать ось, просто позвонив axis.hide() и axis.show(). Демо-версия: 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);

Ответ 2

Это на самом деле стало проще. Вам нужно только установить атрибут заголовка yAxis в false:

yAxis: {
   title: false
},

Вот пример: пример jsfiddle

Ответ 3

Мы можем скрыть метку Yaxis, не скрывая ось Y, не скрывая серию, возвращая пустую строку следующим образом:

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

},

Ответ 4

Для более новых версий (я использую 6.2.0) свойство yAxis имеет параметр gridLineWidth. Просто установите его на 0, и сетки для этой оси исчезнут. В этом JSFiddle есть пример этого.

Однако, если вы находитесь в стилизованном режиме, это сложнее. Здесь вы должны установить className для целевой оси, а затем установить CSS следующим образом:

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

Например, это приведет к исчезновению сеток оси с className установленным в качестве правой оси. Это позволяет иметь разные стили для нескольких осей.