求助：WordPress M Chart（Highcharts）图表系列显示隐藏按钮实现

Hey there, let's fix that series visibility toggle issue you're having with the M Chart plugin. The main problem with your current code is that you're reinitializing a new chart instance instead of grabbing the already-rendered Highcharts instance from the page. Here's how to fix it step by step:

1. Identify the Core Issue in Your Code #

Your line var chart = Highcharts.chart(".m-chart", {}); creates a brand new empty chart inside the .m-chart container, overwriting the existing one from M Chart. That's why your hide logic isn't working—you're targeting the wrong chart entirely!

2. Correctly Retrieve the Existing Chart Instance #

Highcharts provides two reliable ways to access your already-rendered chart:

• Use the highcharts() method directly on the container element: var chart = $(".m-chart").highcharts();
• Or access it via the global Highcharts.charts array (note: this array holds all charts on the page, so double-check the index if you have multiple charts)

3. Full Working Code #

Replace your existing script with this updated version. It handles all your button actions, including resetting to show all series:

jQuery(function($){
  // Wait for the DOM and chart to fully load before binding events
  $(window).on('load', function() {
    // Grab the existing M Chart instance
    var chart = $(".m-chart").highcharts();
    
    // Guard clause: make sure we actually found the chart
    if (!chart) {
      console.error("Could not retrieve Highcharts instance from .m-chart container");
      return;
    }

    // Reset All: show every series
    $(".only-reset").click(function(){
      chart.series.forEach(function(series) {
        series.show();
      });
    });

    // Only show Totals (hide all other series)
    $(".only-totals").click(function(){
      chart.series.forEach(function(series, index) {
        // Adjust the index if your Totals series isn't first (index 0)
        index !== 0 ? series.hide() : series.show();
      });
    });

    // Only show App
    $(".only-app").click(function(){
      chart.series.forEach(function(series, index) {
        // Update index to match your App series position (e.g., index 1)
        index !== 1 ? series.hide() : series.show();
      });
    });

    // Only show Events
    $(".only-events").click(function(){
      chart.series.forEach(function(series, index) {
        // Update index to match your Events series position (e.g., index 2)
        index !== 2 ? series.hide() : series.show();
      });
    });

    // Only show SOS
    $(".only-sos").click(function(){
      chart.series.forEach(function(series, index) {
        // Update index to match your SOS series position (e.g., index 3)
        index !== 3 ? series.hide() : series.show();
      });
    });

    // Only show Magazine
    $(".only-magazine").click(function(){
      chart.series.forEach(function(series, index) {
        // Update index to match your Magazine series position (e.g., index 4)
        index !== 4 ? series.hide() : series.show();
      });
    });
  });
});

4. Critical Notes to Get It Right #

• Verify series indices: The code assumes your 5 series are ordered Totals (0) → App (1) → Events (2) → SOS (3) → Magazine (4). If your M Chart uses a different order, adjust the index numbers in each click handler. You can confirm the order by adding this line right after getting the chart instance:

  console.log("Chart series:", chart.series.map(s => ({name: s.name, index: s.index})));
  

  This will print each series' name and index to your browser console, so you can match them to your buttons perfectly.
• Wait for chart load: Wrapping the code in $(window).on('load') ensures the M Chart has fully rendered before we try to access it—this avoids errors from running the script too early.
• Error handling: The guard clause checks if we retrieved the chart instance, which helps debug cases where the container class name is wrong or the chart failed to load.

内容的提问来源于stack exchange，提问作者James Bernhard