【问题标题】:AmCharts 4 tooltip negtive and positive color of single LineSeriesAmCharts 4工具提示单LineSeries的负和正颜色
【发布时间】:2019-06-26 07:55:19
【问题描述】:

https://www.amcharts.com/demos/date-based-line-chart/

在上面有一个 LineSeries 图表,其正值和负值具有不同的线条颜色,但工具提示只有负值颜色。

这可能有正线有不同颜色的工具提示和负线有另一种工具提示颜色吗?

【问题讨论】:

  • 正如您在图表中看到的,当线条变为负值时,线条颜色为“紫色”,工具提示背景为“紫色”,这很好,但当线条变为正值时,线条变为“蓝色”但工具提示仍然是“紫色”,现在工具提示应该是蓝色。

标签: tooltip amcharts


【解决方案1】:

是的,完全有可能。

首先,对于adjust the background color of a tooltip,您需要取消其从调用对象中获取颜色信息的默认行为(在这种情况下,它会从系列中获取fill)。这是通过:

series.tooltip.getFillFromObject = false;

然后调整背景:

series.tooltip.background.fill = // color here

要根据显示的值切换其背景颜色,我们可以使用adapter 作为系列的tooltipText,因为当触发时,我们知道工具提示正在显示和/或更改.在那里,我们可以检测到当前的dataItem,检查值,并相应地调整工具提示的背景fill

示例代码:

series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = "blue";
series.adapter.add("tooltipText", function(tooltipText) {
  if (series.tooltipDataItem.dataContext.visits < 0) {
    series.tooltip.background.fill = "red";
  } else {
    series.tooltip.background.fill = "blue";
  }
  return tooltipText;
});

演示:

https://codepen.io/team/amcharts/pen/913514e19a189c8779e07ffcae861ce3

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-14
    • 1970-01-01
    相关资源
    最近更新 更多