blocks|key|2501803|text|您可以在legend+container上添加命中事件侦听器。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2501804|编辑：在hit事件内部添加hidden事件。现在，即使单击下面的图例进行切换(在show之后关闭事件，以便事件不会堆积)，Marketing图例仍将始终显示，请考虑以下事项：|BOLD|2501805|​|2501806|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+"%2B+ev.target.dataItem.name);
});|code-block|syntax|javascript|2501807|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%25;
++height:+401px;
}|2501808|<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>|2501809|2501810|entityMap^0|4|G|0|0|2|4|3|D|6|14|4|1P|9|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|H]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1A|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1B|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|M|7|1C|8|@]|D|@]|E|$N|O]]|$1|R|3|S|5|M|7|1D|8|@]|D|@]|E|$N|O]]|$1|T|3|J|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|V|$]]

<p>You could add hit event listener on the <code>legend container</code>.</p>

<p><strong>EDIT</strong>: Added <code>hidden</code> event inside <code>hit</code> event. Now <code>Marketing</code> legend will always show even the legend below is clicked to toggle (switching off the event after <code>show</code> so events don't pile up), consider the following:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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] &amp;&amp; !series.isHidden &amp;&amp; !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] &amp;&amp; !series.isHidden &amp;&amp; !series.isHiding &amp;&amp; !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);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://www.amcharts.com/lib/4/core.js"&gt;&lt;/script&gt;
&lt;script src="http://www.amcharts.com/lib/4/charts.js"&gt;&lt;/script&gt;
&lt;script src="http://www.amcharts.com/lib/4/themes/animated.js"&gt;&lt;/script&gt;
&lt;script src="http://www.amcharts.com/lib/4/themes/dataviz.js"&gt;&lt;/script&gt;
&lt;body&gt;
&lt;div id="chartdiv"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


<p>I'm using a series' tooltip for showing all the series values of a chart in the same tooltip.</p>

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

<p>But I need a way to disable toggling for the series that has the tooltip, because disabling that series would make the tooltip disappear too.</p>

<p>As shown in amCharts documentation, you can <a href="https://www.amcharts.com/docs/v4/tutorials/disabling-toggling-of-items-in-legend/" rel="nofollow noreferrer">Disable toggling of items in Legend</a>, but that is an option that applies to the whole chart:</p>

<pre><code>chart.legend.itemContainers.template.clickable = false;
</code></pre>

<p>What if I need to disable it only for one series, while keep the toggling enabled for the other series? Is there a way?</p>


amCharts: Disable toggling of some items in Legend

我使用序列的工具提示在同一工具提示中显示图表的所有序列值。series1.tooltipText= '[bold]{dateX}[/]\\nSeries1Label: {series1}\\nSeries2Label: {series2}\\nSeries3Label: {series3}';series2.toolt...

问amCharts:禁止切换图例中的某些项目
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问amCharts:禁止切换图例中的某些项目EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问amCharts:禁止切换图例中的某些项目
EN