【问题标题】:Change default behaviour of legend in Amchart 5Change default behaviour of legend in Amchart 5
【发布时间】:2022-12-28 03:01:59
【问题描述】:

I'm trying to make this chart (https://www.amcharts.com/demos/reversed-value-axis/) in angular and need help in changing default behaviour of legend like if i click on any legend only that axis should be show other will hide unlike now if we click on any legend, that will hide. is there any possible way to do it?

Default Chart

If click on one legend

【问题讨论】:

    标签: amcharts amcharts5


    【解决方案1】:

    Yes, of course...

    To do that, you need a collection of all your series. You also need hide() and appear() methods.

    Here is a possible implementation:

    am5.ready(() => {
    
      let root = am5.Root.new("chartdiv");
    
      root.setThemes([
        am5themes_Animated.new(root)
      ]);
    
      let chart = root.container.children.push(am5xy.XYChart.new(root, {
        layout: root.verticalLayout
      }));
    
      let data = [
        {
          year: "1930",
          italy: 1,
          germany: 5,
          uk: 3
        },
        {
          year: "1934",
          italy: 1,
          germany: 2,
          uk: 6
        },
        {
          year: "1938",
          italy: 2,
          germany: 3,
          uk: 1
        },
        {
          year: "1950",
          italy: 3,
          germany: 4,
          uk: 1
        },
        {
          year: "1954",
          italy: 5,
          germany: 1,
          uk: 2
        },
        {
          year: "1958",
          italy: 3,
          germany: 2,
          uk: 1
        },
        {
          year: "1962",
          italy: 1,
          germany: 2,
          uk: 3
        },
        {
          year: "1966",
          italy: 2,
          germany: 1,
          uk: 5
        },
        {
          year: "1970",
          italy: 3,
          germany: 5,
          uk: 2
        },
        {
          year: "1974",
          italy: 4,
          germany: 3,
          uk: 6
        },
        {
          year: "1978",
          italy: 1,
          germany: 2,
          uk: 4
        }
      ];
    
      let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "year",
        renderer: am5xy.AxisRendererX.new(root, {})
      }));
    
      xAxis.data.setAll(data);
    
      let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {
          inversed: true
        })
      }));
    
      function createSeries(name, field) {
        let series = chart.series.push(am5xy.LineSeries.new(root, {
          name,
          xAxis,
          yAxis,
          categoryXField: "year",
          valueYField: field
        }));
    
        series.bullets.push(() => {
          return am5.Bullet.new(root, {
            sprite: am5.Circle.new(root, {
              radius: 5,
              fill: series.get("fill")
            })
          });
        });
        
        series.data.setAll(data);
        
        return series;
      }
      
      // The interesting part starts here!
      
      let allSeries = [];
    
      allSeries.push(createSeries("Italy", "italy"));
      allSeries.push(createSeries("Germany", "germany"));
      allSeries.push(createSeries("UK", "uk"));
    
      let legend = chart.children.push(am5.Legend.new(root, {
        centerX: am5.p50,
        x: am5.p50
      }));
      
      legend.itemContainers.template.events.on("click", () => {
        for (let series of allSeries) {
          series.hide();
        }
      });
      
      legend.data.setAll(chart.series.values);
      
      document.getElementById("reset").addEventListener("click", () => {
        for (let series of allSeries) {
          series.appear();
        }
      });
    
    });
    #chartdiv {
      width: 100%;
      height: 350px;
    }
    
    #reset {
      width: 50%;
      display: block;
      margin: auto;
      cursor: pointer;
    }
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    
    <div id="chartdiv"></div>
    <button type="button" id="reset">Reset</button>

    【讨论】:

      猜你喜欢
      • 2022-12-02
      • 2022-12-02
      • 2022-11-09
      • 2022-12-27
      • 1970-01-01
      • 2022-12-28
      • 2022-12-27
      • 2022-12-27
      • 2022-12-27
      相关资源
      最近更新 更多