amCharts：禁用图例中某些项目的切换

Question

我正在使用系列工具提示在同一工具提示中显示图表的所有系列值。

series1.tooltipText= '[bold]{dateX}[/]\\nSeries1Label: {series1}\\nSeries2Label: {series2}\\nSeries3Label: {series3}';
series2.tooltip.disabled = true;
series3.tooltip.disabled = true;

但我需要一种方法来禁用具有工具提示的系列的切换，因为禁用该系列也会使工具提示消失。

如 amCharts 文档中所示，您可以Disable toggling of items in Legend，但这是一个适用于整个图表的选项：

chart.legend.itemContainers.template.clickable = false;

如果我只需要为一个系列禁用它，而为另一个系列保持启用切换呢？有什么办法吗？

Answer 1

您可以在legend container 上添加命中事件监听器。

编辑：在hit 事件中添加了hidden 事件。现在Marketing 图例将始终显示，即使单击下面的图例进行切换（在show 之后关闭事件，这样事件就不会堆积），请考虑以下事项：

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dataviz);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}
, {
  "country": "Republic",
  //"research": 301.9,
  "marketing": 222,
  "sales": 251
}
];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;


var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Expenditure (M)";

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "research";
series.dataFields.categoryY = "country";
series.name = "Research";
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.stacked = true;
series.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);
series.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "marketing";
series2.dataFields.categoryY = "country";
series2.name = "Marketing";
series2.tooltipText = "{name}: [bold]{valueY}[/]";
series2.stacked = true;
series2.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series2.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series2.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series2.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "sales";
series3.dataFields.categoryY = "country";
series3.name = "Sales";
series3.tooltipText = "{name}: [bold]{valueY}[/]";
series3.stacked = true;
series3.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1);
series3.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1);

series3.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius);
series3.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius);

// Add cursor
chart.cursor = new am4charts.XYCursor();

function cornerRadius(radius, item) {
	var dataItem = item.dataItem;
	// Find the last series in this stack
	var lastSeries;
	// console.log(chart.series)
	chart.series.each(function(series) {
		if (dataItem.dataContext[series.dataFields.valueX] && !series.isHidden && !series.isHiding) {
			lastSeries = series;
		}
	});
	// If current series is the one, use rounded corner
	dataItem.component == lastSeries ? 100 : radius;
	// console.log(dataItem)
	return dataItem.component == lastSeries ? 10 : radius;
}

function cornerRadius1(radius, item) {
	var dataItem = item.dataItem;
	var lastSeries;
  var flag = false;
	chart.series.each(function(series) {
		if (dataItem.dataContext[series.dataFields.valueX] && !series.isHidden && !series.isHiding && !flag) {
			lastSeries = series;
      flag = true;
		}
	});
  	dataItem.component == lastSeries ? 100 : radius;
	return dataItem.component == lastSeries ? 10 : radius;
}
chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.events.on("hit", function(ev) {
    series2.events.on("hidden", function() {
        series2.show();
        series2.events.off("hidden");
    });
//console.log("Clicked on "+ ev.target.dataItem.name);
});

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 9pt;
}

#chartdiv {
  width: 100%;
  height: 401px;
}

<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="http://www.amcharts.com/lib/4/themes/dataviz.js"></script>
<body>
<div id="chartdiv"></div>
</body>