有没有办法让图例项目在刷新时保存其状态? [英] Is there a way to have a toggled legend item save its state on refresh?

问题描述

当前是否可以使用图例项目在刷新时保存其状态?例如，我有一个包含3条线的图形:a，b和c.我关闭了c线，因此它不会显示在图形上.当前，刷新页面时，a，b和c将再次显示在图形上.有没有办法让它记住关闭c?

Is there currently a way to have a legend item save its state on refresh? For example, I have a graph that has 3 lines: a, b, and c. I toggle off line c so it doesn't show on the graph. Currently when refreshing the page, a, b, and c will show on the graph again. Is there a way to have it remember to turn off c?

推荐答案

使用 localStorage 功能存储图表系列可见性的当前状态.单击图例项时需要更改本地存储位置的状态，因此只需使用 plotOptions.series.events.legendItemClick 处理程序，然后在每个图表上 load 事件，请根据存储的信息设置系列可见性.

Use localStorage feature to store current state of the chart series visibility. You need to change the state of your local storage position when clicking on legend item, so just use the plotOptions.series.events.legendItemClick handler, and then on every chart load event, set your series visibility basing on the stored information.

  chart: {
    events: {
      load: function() {
        var series = this.series;
        // If there is no legend items visibility flags saved in local storage, save them.
        if (!localStorage.legendItems) {
          let legend = []
          series.forEach(function(series) {
            legend.push(series.visible)
          })
          localStorage.legendItems = legend.toString()
         //
        } else {
          let legend = localStorage.legendItems.split(',')
          let legendBooleans = []
          legend.forEach(function(elem) {
            var isTrueSet = (elem === 'true')
            legendBooleans.push(isTrueSet)
          })
          legendBooleans.forEach(function(state, i) {
            series[i].update({
                visible: state
            })
          })
        }
      }
    }
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          var series = this.chart.series
          var index = this.index
          var legend = localStorage.legendItems.split(',')
          var legendBooleans = []
          legend.forEach(function(elem) {
            var isTrueSet = (elem === 'true')
            legendBooleans.push(isTrueSet)
          })
          // toggle series visibility flag and override it in local storage
          legendBooleans[index] = !legendBooleans[index]
          localStorage.legendItems = legendBooleans.toString()
        }
      }
    }
  },

如果有任何疑问，请问.

If you have any questions, just ask.

实时示例: https://jsfiddle.net/os961gke/

API参考: https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick https://api.highcharts.com/highcharts/chart.events.load

这篇关于有没有办法让图例项目在刷新时保存其状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！