首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >amCharts:禁止切换图例中的某些项目

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

Stack Overflow用户
提问于 2019-06-14 00:06:02
回答 1查看 1.5K关注 0票数 0

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

代码语言:javascript
复制
series1.tooltipText= '[bold]{dateX}[/]\\nSeries1Label: {series1}\\nSeries2Label: {series2}\\nSeries3Label: {series3}';
series2.tooltip.disabled = true;
series3.tooltip.disabled = true;

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

代码语言:javascript
复制
chart.legend.itemContainers.template.clickable = false;

如果我只需要对一个系列禁用它,而对另一个系列保持启用切换,该怎么办?有什么办法吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-14 03:21:21

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

编辑:在hit事件内部添加hidden事件。现在,即使单击下面的图例进行切换(在show之后关闭事件,以便事件不会堆积),Marketing图例仍将始终显示,请考虑以下事项:

代码语言:javascript
复制
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);
});
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56584538

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档