admin管理员组文章数量:1391937
I would like to use an echarts horizontal dataZoom slider with timeseries data.
The code below (complete example) works fine except for the fact that the miniature chart of the data in the slider is evidently plotted using a sequential index (1, 2, 3, 4, etc.) for the X axis instead of the actual data values (1980, 2021, 2022, 2023, etc.). Hence it's confusing and misleading when actually using the slider to view a section of data, as in the example.
I found and tried this answer (complete example), but it did not change the slider appearance or behaviour.
<html>
<head>
<script type="text/javascript" src="/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var chartDom = document.getElementById('chart');
var chart = echarts.init(chartDom);
var option;
var data = [
[new Date('1980-01-01'), 7],
[new Date('2021-01-01'), 10],
[new Date('2021-07-01'), 2],
[new Date('2022-01-01'), 9],
[new Date('2022-07-01'), 1.5],
[new Date('2023-01-01'), 10],
[new Date('2023-07-01'), 2],
[new Date('2024-01-01'), 8.7],
[new Date('2024-07-01'), 1.2],
[new Date('2025-01-01'), 7],
];
option = {
dataset: {
source: data,
dimensions: ['timestampCol', 'paramCol']
},
xAxis: {type: 'time'},
yAxis: {type: 'value'},
dataZoom: {
type: 'slider',
filterMode: 'none',
},
series: [
{
name: 'paramCol',
type: 'line',
symbol: 'triangle',
encode: {x: 'timestampCol', y: 'paramCol'}
}
]
};
option && chart.setOption(option);
</script>
</body>
</html>
I would like to use an echarts horizontal dataZoom slider with timeseries data.
The code below (complete example) works fine except for the fact that the miniature chart of the data in the slider is evidently plotted using a sequential index (1, 2, 3, 4, etc.) for the X axis instead of the actual data values (1980, 2021, 2022, 2023, etc.). Hence it's confusing and misleading when actually using the slider to view a section of data, as in the example.
I found and tried this answer (complete example), but it did not change the slider appearance or behaviour.
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var chartDom = document.getElementById('chart');
var chart = echarts.init(chartDom);
var option;
var data = [
[new Date('1980-01-01'), 7],
[new Date('2021-01-01'), 10],
[new Date('2021-07-01'), 2],
[new Date('2022-01-01'), 9],
[new Date('2022-07-01'), 1.5],
[new Date('2023-01-01'), 10],
[new Date('2023-07-01'), 2],
[new Date('2024-01-01'), 8.7],
[new Date('2024-07-01'), 1.2],
[new Date('2025-01-01'), 7],
];
option = {
dataset: {
source: data,
dimensions: ['timestampCol', 'paramCol']
},
xAxis: {type: 'time'},
yAxis: {type: 'value'},
dataZoom: {
type: 'slider',
filterMode: 'none',
},
series: [
{
name: 'paramCol',
type: 'line',
symbol: 'triangle',
encode: {x: 'timestampCol', y: 'paramCol'}
}
]
};
option && chart.setOption(option);
</script>
</body>
</html>
1 Answer
Reset to default 1This is the standard behavior of echarts, no matter what kind of
axes are used, the x axis positions in the slider are equidistant;
see how SliderZoomView constructs the shadow
polygon in the source code.
I wouldn't expect the polygon inside the slider to be an accurate representation of the chart data, but if you think this is important, you may add a feature request or bug report on github.
Just as an experiment, to prove the point, one gets an accurate representation of the x positions in the slider if one replaces at line 422:
areaPoints.push([thisCoord, otherCoord]);
linePoints.push([thisCoord, otherCoord]);
thisCoord += step;
lastIsEmpty = isEmpty;
with
const thisAxisIndex = info.thisAxis.index,
thisMinValue = Math.min(...data.getDataExtent(thisAxisIndex)),
thisMaxValue = Math.max(...data.getDataExtent(thisAxisIndex)),
thisValue = data.getValues([thisAxisIndex], index)[0];
thisCoord = Math.round(thisShadowExtent[1] * (thisValue - thisMinValue) / (thisMaxValue - thisMinValue));
areaPoints.push([thisCoord, otherCoord]);
linePoints.push([thisCoord, otherCoord]);
lastIsEmpty = isEmpty;
where the first three lines (const declarations) may be moved outside the
data.each call. The changed version (don't use in production!) is
in this codesandbox.
本文标签： echartsHorizontal dataZoom slider does not plot data against the correct X axis valuesStack Overflow
版权声明：本文标题：echarts - Horizontal dataZoom slider does not plot data against the correct X axis values? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744670705a2618803.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论