What problem does this feature solve?
I want to have a functionality which allows to have the same values on every parallel axis. Actually the function alignticks don't fit what I'm looking for.
Here a sample code:
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false
}
},
legend: {
data: ['Value', 'Price'],
left: 'center',
icon: 'circle',
itemGap: 30
},
xAxis: {
type: 'category',
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: [
{
name: 'Valor',
type: 'log',
scale: true
},
{
name: 'Price',
alignTicks:true,
type: 'log',
scale: true,
logBase: 10
}
],
series: [
{
name: 'Valor',
type: 'line',
lineStyle: { color: '#0066ff', width: 1.5 },
itemStyle: { color: '#0066ff' },
showSymbol: false,
z: 10,
data: [500, 780, 750, 760, 770, 2000, 3500, 1500, 30000, 3900, 7800, 7900, 8000, 9000, 7000, 8500, 8000, 7000, 6000, 4000]
},
{
name: 'Price',
type: 'line',
yAxisIndex: 1,
lineStyle: { color: '#000', width: 1.5 },
itemStyle: { color: '#000' },
showSymbol: false,
z: 20,
data: [300, 280, 250, 260, 270, 300, 550, 1000, 4000, 3900, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
}
],
};
My request is based on the HighCharts library, which provides an API called linkedTo , which does the same thing as I described here.
Here a example of highcharts: jsfiddle
What does the proposed API look like?
Let's say we have a boolean attribute yAxis.linkedTo. By setting it to 0, its ticks will get aligned with every other axis in the yAxis array which has the same value. That way, if one of the axis has a value of 100, all the other axis will also have a value of 100 and get aligned altogether.
8条答案
按热度按时间z9gpfhce1#
The demo you provided using ECharts and HighCharts looks quite similar to me. Can you further explain what is needed? It seems to me the axes are already aligned with ECharts.
kupeojn62#
The axis are aligned but not the values, I tried many different ways to align values, but if one of the axis have a smaller values than the other, is imposible to align the values, only works if max and min range values (0.1-1-10-100, etc) are the same
in both axis
Here we can see that one of values is 10x bigger and are represented in the same part of the graph
This is the example in highcharts with the linkedto activated
@Ovilia
ao218c7q3#
We need this feature too!
mcdcgff04#
Well, this feature seems a little unexpected to me. If two axes should always have the same extremes, why do you need a second axis for the first place?
bgtovc5b5#
This first image is do it in tableau software, we linked first Y axis and second Yaxis so the values are the same in both Y axis. We want to know when the black line is below the orange line.
We are bringing everything developed in tableau into production and we find that we cannot synchronize the Y axis values. As you can see we have given colors to the two Y axes, so the user can know which colors the value represents. Visually it is much more intuitive
ubbxdtey6#
I'm afraid this cannot be done. You may try to set
min/max
manually.1sbrub3j7#
I tried already with min and max, also setting a functions for min and max and with log charts anything works.
Highcharts provide this option with linkedto , grafana, plotly, tableau, and other chart providers do it aswell.
Would be great to implment some similar solution, the main idea would be to set one of the Y axis as master and the other that take the axis values from master and align with them.
See solution that grafana implemented here
And here solution for plotly
Someone asked the same here https://github.com/apache/echarts/issues/16154 , so is a feature that would be great to implement.
yrwegjxp8#
@aleixtusetbadia A pull request is welcomed. You may checkout how we aligned ticks of multiple axes with ECharts and how to debug .