-1

Highcharts 有一个非常好的过滤功能，图表呈现，显示图例，您可以单击图例中的每个项目将其从图表中删除。我正在处理一个大型数据集并想做相反的事情（即，我不想删除在图例中单击的项目，留下所有其他项目，我只想显示该项目，删除所有其他项目)

尽管有诸如Highcharts 系列之类的 StackOverflow 条目 - 想要显示/隐藏所有看起来很完美（并在 jsfiddle 中运行）的选定系列（默认逻辑的反转），但我正在使用散点图。查看文档，它似乎仍然可以工作，因为 scatter 使用系列、事件和 legendItemClick，但该答案中的示例不起作用。

甚至像……这样简单的事情

plotOptions: {
  scatter: {
    marker: {
      radius: c.data.radius,
      states: {
        hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
        }
      }
    },
    series: {
      events: {
        legendItemClick: function(event) {
          console.log('legend clicked')
          return false;
        }
      }
    }
  }
}

...不起作用（尽管图表显示正确）。控制台中没有消息，并且 return false 不会停止默认行为。散点图似乎无法识别 legendItemClick。

有人有想法么？

4

2 回答 2

0

这是一个如何在 Highchartsscatter图表中实现所需行为的简单示例：

    legendItemClick: function(event) {
      var series = this.chart.series,
        index = this.index;

      if (this.visible) {
        return false

      } else {
        Highcharts.each(series, function(s) {
          if (s.index !== index) {
            s.hide();
          } else {
            return true
          }
        });
      }
    }

现场演示：https ://jsfiddle.net/BlackLabel/45e01r78/

于 2018-09-10T14:03:40.143 回答
-1

您可以使用 FusionCharts 轻松满足您的要求，您可以在该系列的数据集级别使用“可见”：“0”使用单个属性过滤系列，这将禁用图例，并且当您可以通过单击启用该系列时图例，进一步您还可以自定义图例，您可以反转图例的顺序，您还可以调用图例项单击翻转等事件，从而使图例管理变得非常容易，这里有一个相同的示例片段

这是一个示例小提琴 

 FusionCharts.ready(function() {
  var tempVsSalesChart = new FusionCharts({
    type: 'scatter',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "Sales of Beer & Ice-cream vs Temperature",
        "subCaption": "Los Angeles Topanga",
        "xAxisName": "Average Day Temperature",
        "yAxisName": "Sales (In USD)",
        "xAxisMinValue": "23",
        "xAxisMaxValue": "95",
        "yNumberPrefix": "$",
        "xNumberSuffix": "° F",
        "showYAxisLine": "1",
        "theme": "fusion"
      },
      "categories": [{
        "verticalLineDashed": "1",
        "verticalLineDashLen": "1",
        "verticalLineDashGap": "1",
        "verticalLineThickness": "1",
        "verticalLineColor": "#000000",
        "category": [{
            "x": "23",
            "label": "23\xB0 F",
            "showverticalline": "0"
          },
          {
            "x": "32",
            "label": "32\xB0 F",
            "showverticalline": "1"
          },
          {
            "x": "50",
            "label": "50\xB0 F",
            "showverticalline": "1"
          },
          {
            "x": "68",
            "label": "68\xB0 F",
            "showverticalline": "1"
          },
          {
            "x": "80",
            "label": "80\xB0 F",
            "showverticalline": "1"
          },
          {
            "x": "95",
            "label": "95\xB0 F",
            "showverticalline": "1"
          }
        ]
      }],
      "dataset": [{
        "seriesname": "Ice Cream",
        "visible": "0",
        "showregressionline": "1",
        "data": [{
            "x": "23",
            "y": "1560"
          },
          {
            "x": "24",
            "y": "1500"
          },
          {
            "x": "24",
            "y": "1680"
          },
          {
            "x": "25",
            "y": "1780"
          },
          {
            "x": "25",
            "y": "1620"
          },
          {
            "x": "26",
            "y": "1810"
          },
          {
            "x": "27",
            "y": "2310"
          },
          {
            "x": "29",
            "y": "2620"
          },
          {
            "x": "31",
            "y": "2500"
          },
          {
            "x": "32",
            "y": "2410"
          },
          {
            "x": "35",
            "y": "2880"
          },
          {
            "x": "36",
            "y": "3910"
          },
          {
            "x": "34",
            "y": "3960"
          },
          {
            "x": "38",
            "y": "4080"
          },
          {
            "x": "40",
            "y": "4190"
          },
          {
            "x": "41",
            "y": "4170"
          },
          {
            "x": "42",
            "y": "4280"
          },
          {
            "x": "54",
            "y": "5180"
          },
          {
            "x": "53",
            "y": "5770"
          },
          {
            "x": "55",
            "y": "5900"
          },
          {
            "x": "56",
            "y": "5940"
          },
          {
            "x": "58",
            "y": "6090"
          },
          {
            "x": "61",
            "y": "6086"
          },
          {
            "x": "67",
            "y": "6100"
          },
          {
            "x": "68",
            "y": "6200"
          },
          {
            "x": "70",
            "y": "6360"
          },
          {
            "x": "75",
            "y": "6450"
          },
          {
            "x": "79",
            "y": "6650"
          },
          {
            "x": "80",
            "y": "6710"
          },
          {
            "x": "79",
            "y": "6975"
          },
          {
            "x": "82",
            "y": "7000"
          },
          {
            "x": "85",
            "y": "7150"
          },
          {
            "x": "86",
            "y": "7160"
          },
          {
            "x": "86",
            "y": "7200"
          },
          {
            "x": "88",
            "y": "7230"
          },
          {
            "x": "87",
            "y": "7210"
          },
          {
            "x": "86",
            "y": "7480"
          },
          {
            "x": "89",
            "y": "7540"
          },
          {
            "x": "89",
            "y": "7400"
          },
          {
            "x": "90",
            "y": "7500"
          },
          {
            "x": "92",
            "y": "7640"
          }
        ]
      }, {
        "seriesname": "Beer",
        "showregressionline": "1",
        "data": [{
            "x": "23",
            "y": "3160"
          },
          {
            "x": "24",
            "y": "3000"
          },
          {
            "x": "24",
            "y": "3080"
          },
          {
            "x": "25",
            "y": "3680"
          },
          {
            "x": "25",
            "y": "3320"
          },
          {
            "x": "26",
            "y": "3810"
          },
          {
            "x": "27",
            "y": "5310"
          },
          {
            "x": "29",
            "y": "3620"
          },
          {
            "x": "31",
            "y": "4100"
          },
          {
            "x": "32",
            "y": "3910"
          },
          {
            "x": "35",
            "y": "4280"
          },
          {
            "x": "36",
            "y": "4210"
          },
          {
            "x": "34",
            "y": "4160"
          },
          {
            "x": "38",
            "y": "4480"
          },
          {
            "x": "40",
            "y": "4890"
          },
          {
            "x": "41",
            "y": "4770"
          },
          {
            "x": "42",
            "y": "4880"
          },
          {
            "x": "54",
            "y": "4980"
          },
          {
            "x": "53",
            "y": "4770"
          },
          {
            "x": "55",
            "y": "4900"
          },
          {
            "x": "56",
            "y": "4940"
          },
          {
            "x": "58",
            "y": "4990"
          },
          {
            "x": "61",
            "y": "5086"
          },
          {
            "x": "67",
            "y": "5100"
          },
          {
            "x": "68",
            "y": "4700"
          },
          {
            "x": "70",
            "y": "5360"
          },
          {
            "x": "75",
            "y": "5150"
          },
          {
            "x": "79",
            "y": "5450"
          },
          {
            "x": "80",
            "y": "5010"
          },
          {
            "x": "79",
            "y": "4975"
          },
          {
            "x": "82",
            "y": "5400"
          },
          {
            "x": "85",
            "y": "5150"
          },
          {
            "x": "86",
            "y": "5460"
          },
          {
            "x": "86",
            "y": "5000"
          },
          {
            "x": "88",
            "y": "5200"
          },
          {
            "x": "87",
            "y": "5410"
          },
          {
            "x": "86",
            "y": "5480"
          },
          {
            "x": "89",
            "y": "5440"
          },
          {
            "x": "89",
            "y": "5300"
          },
          {
            "x": "90",
            "y": "5500"
          },
          {
            "x": "92",
            "y": "5240"
          }
        ]
      }],
      "vtrendlines": [{
        "line": [{
            "startvalue": "23",
            "endvalue": "32",
            "istrendzone": "1",
            "displayvalue": " ",
            "color": "#adebff",
            "alpha": "25"
          },
          {
            "startvalue": "23",
            "endvalue": "32",
            "istrendzone": "1",
            "alpha": "0",
            "displayvalue": "Very cold"
          },
          {
            "startvalue": "32",
            "endvalue": "50",
            "istrendzone": "1",
            "displayvalue": " ",
            "color": "#adebff",
            "alpha": "15"
          }, {
            "startvalue": "32",
            "endvalue": "50",
            "istrendzone": "1",
            "alpha": "0",
            "displayvalue": "Cold"
          },
          {
            "startvalue": "50",
            "endvalue": "68",
            "istrendzone": "1",
            "alpha": "0",
            "displayvalue": "Moderate"
          },
          {
            "startvalue": "68",
            "endvalue": "80",
            "istrendzone": "1",
            "alpha": "0",
            "displayvalue": "Hot"
          },
          {
            "startvalue": "68",
            "endvalue": "80",
            "istrendzone": "1",
            "displayvalue": " ",
            "color": "#f2a485",
            "alpha": "15"
          },
          {
            "startvalue": "80",
            "endvalue": "95",
            "istrendzone": "1",
            "alpha": "0",
            "displayvalue": "Very hot"
          },
          {
            "startvalue": "80",
            "endvalue": "95",
            "istrendzone": "1",
            "displayvalue": " ",
            "color": "#f2a485",
            "alpha": "25"
          }
        ]
      }]
    },
    events: {
      "legendItemClicked": function(eventObj) {
        console.log(eventObj.sender);
      }
    }
  });

  tempVsSalesChart.render();
});

要了解有关 FusionCharts 图例的更多信息，请查看此链接

于 2018-09-10T04:27:11.547 回答