AmCharts4-将y = 0轴与多个y轴同步

时间:2019-09-19 13:57:24

标签: angular typescript amcharts amcharts4

我正在尝试在amcharts4中构建一个XY图表,该图表具有两个y轴,一个在左侧,另一个在右侧。这两个轴指的是具有不同值范围的两个不同变量。 我无法配置图形,以使两个y轴“共享” y = 0轴。 当我想查看x轴的一部分并且对两个独立变量的趋势更感兴趣时,此功能很有用。 我对查看变量是正数还是负数以及它们之间的关系更感兴趣(确切的值将显示在tootlip中)。 一种解决方案是使用固定比例尺,两个y轴值之间的范围更大。但是,在这种情况下,如果我有一个变量,其变量在0附近变化很小,而另一个变量的范围更大,则与第二个变量的巨大变化相比,第一个变量的行将非常平坦。

示例:https://imgur.com/a/HFqsIy6 浅蓝色表示左侧的y轴,右侧表示紫色。

我想要的是一个图,该图的左侧为[-2,2]值,右侧为[-400,400],以使0处于两个y轴的中心。 我现在拥有的是一张图,其中紫色变量似乎具有负值,因为我从左到右读取它。

一种想法是手动计算轴的范围,以得到新的间隔[-400,400],但是存在两个问题: -我有大量数据要检查两个轴上的最大值和最小值。在我的情况下,在图形中将显示大约10个变量。 -我无法概括微积分,因为值可以是任何类型:只能是负的,只能是正的,或者既可以是正的也可以是负的。 我认为产生所需输出间隔的函数对我来说太昂贵了。

是否有amcharts4方法/属性/等可让我轻松地做到这一点?

const data = [{"var1": 0, "var2": 400, "MyDate": `today`}, {"var1": 0, "var2": 0, "MyDate": `tomorrow`};

const chart = am4core.create(chartTitle, am4charts.XYChart);

chart.data = data;

const dateAxis = this.chart.xAxes.push(new am4charts.DateAxis());

const valueAxis1 = this.chart.yAxes.push(new am4charts.ValueAxis());

const valueAxis2 = this.chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.renderer.opposite = true;

const series = this.chart.series.push(new am4charts.LineSeries());

series.dataFields.valueY = "var1";
series.dataFields.dateX = "MyDate";

const series2 = this.chart.series.push(new am4charts.LineSeries());

series2.dataFields.valueY = "var2";
series2.dataFields.dateX = "MyDate";

0 个答案:

没有答案