You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Stephen Rich <st...@bri-associates.com> on 2023/03/11 15:45:21 UTC
Possible Bug?
Hello, I am trying to modify the example at https://echarts.apache.org/examples/en/editor.html?c=line-draggable to use stacked lines. When I change the xAxis to type: category the drag areas, shown in black below, are offset. It seems the myChart.convertFromPixel('grid', pos); is not returning the correct coordinates when the xAxis is set to category. Is there something I am missing or is this a bug?
[cid:image001.png@01D953ED.6D170500]
Here is the code I am using in the example "Edit Code" tab.
const symbolSize = 20;
const data = [
[1, 10],
[2, 20],
[3, 30],
[4, 40],
[5, 50]
];
const data2 = [
[1, 90],
[2, 80],
[3, 70],
[4, 60],
[5, 50]
];
option = {
title: {
text: 'Try Dragging these Points',
left: 'center'
},
grid: {
top: '8%',
bottom: '12%'
},
xAxis: {
// min: 1,
// max: 5,
//type: 'value',
type: 'category',
//axisLine: { onZero: false }
},
yAxis: {
min: 0,
max: 100,
type: 'value',
axisLine: { onZero: false }
},
series: [
{
id: 'a',
type: 'line',
stack: "Total",
areaStyle: {},
symbolSize: symbolSize,
data: data
},
{
id: 'b',
type: 'line',
stack: "Total",
areaStyle: {},
symbolSize: symbolSize,
data: data2
}
]
};
setTimeout(function () {
// Add shadow circles (which is not visible) to enable drag.
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
type: 'circle',
position: myChart.convertToPixel('grid', item),
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
onmousemove: function () {
showTooltip(dataIndex);
},
onmouseout: function () {
hideTooltip(dataIndex);
},
z: 100
};
})
});
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);
function updatePosition() {
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
}
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}
function onPointDragging(dataIndex, pos) {
data[dataIndex] = myChart.convertFromPixel('grid', pos);
// Update data
myChart.setOption({
series: [
{
id: 'a',
data: data
},
{
id: 'b',
data: data2
},
]
});
}
Managing Partner | BRI, LLC | www.bri-associates.com<http://www.bri-associates.com/> | +1 (503) 853-4656
Re: Possible Bug?
Posted by Ovilia <ov...@gmail.com>.
Hi,
I think dragging stacked data is probably an undefined interaction for now.
That being said, if you are interested in making a pull request to fix
this, we will really appreciate it.
Thanks
*Ovilia*
On Sat, Mar 11, 2023 at 11:45 PM Stephen Rich <st...@bri-associates.com>
wrote:
>
>
> Hello, I am trying to modify the example at
> https://echarts.apache.org/examples/en/editor.html?c=line-draggable to
> use stacked lines. When I change the xAxis to type: category the drag
> areas, shown in black below, are offset. It seems the
> myChart.convertFromPixel('grid', pos); is not returning the correct
> coordinates when the xAxis is set to category. Is there something I am
> missing or is this a bug?
>
>
>
> Here is the code I am using in the example “Edit Code” tab.
>
> const symbolSize = 20;
>
> const data = [
>
> [1, 10],
>
> [2, 20],
>
> [3, 30],
>
> [4, 40],
>
> [5, 50]
>
> ];
>
> const data2 = [
>
> [1, 90],
>
> [2, 80],
>
> [3, 70],
>
> [4, 60],
>
> [5, 50]
>
> ];
>
> option = {
>
> title: {
>
> text: 'Try Dragging these Points',
>
> left: 'center'
>
> },
>
> grid: {
>
> top: '8%',
>
> bottom: '12%'
>
> },
>
> xAxis: {
>
> // min: 1,
>
> // max: 5,
>
> //type: 'value',
>
> type: 'category',
>
> //axisLine: { onZero: false }
>
> },
>
> yAxis: {
>
> min: 0,
>
> max: 100,
>
> type: 'value',
>
> axisLine: { onZero: false }
>
> },
>
> series: [
>
> {
>
> id: 'a',
>
> type: 'line',
>
> stack: "Total",
>
> areaStyle: {},
>
>
>
> symbolSize: symbolSize,
>
> data: data
>
> },
>
> {
>
> id: 'b',
>
> type: 'line',
>
> stack: "Total",
>
> areaStyle: {},
>
>
>
> symbolSize: symbolSize,
>
> data: data2
>
> }
>
> ]
>
> };
>
> setTimeout(function () {
>
> // Add shadow circles (which is not visible) to enable drag.
>
> myChart.setOption({
>
> graphic: data.map(function (item, dataIndex) {
>
> return {
>
> type: 'circle',
>
> position: myChart.convertToPixel('grid', item),
>
> shape: {
>
> cx: 0,
>
> cy: 0,
>
> r: symbolSize / 2
>
> },
>
> invisible: false,
>
> draggable: true,
>
> ondrag: function (dx, dy) {
>
> onPointDragging(dataIndex, [this.x, this.y]);
>
> },
>
> onmousemove: function () {
>
> showTooltip(dataIndex);
>
> },
>
> onmouseout: function () {
>
> hideTooltip(dataIndex);
>
> },
>
> z: 100
>
> };
>
> })
>
> });
>
> }, 0);
>
> window.addEventListener('resize', updatePosition);
>
> myChart.on('dataZoom', updatePosition);
>
> function updatePosition() {
>
> myChart.setOption({
>
> graphic: data.map(function (item, dataIndex) {
>
> return {
>
> position: myChart.convertToPixel('grid', item)
>
> };
>
> })
>
> });
>
> }
>
> function showTooltip(dataIndex) {
>
> myChart.dispatchAction({
>
> type: 'showTip',
>
> seriesIndex: 0,
>
> dataIndex: dataIndex
>
> });
>
> }
>
> function hideTooltip(dataIndex) {
>
> myChart.dispatchAction({
>
> type: 'hideTip'
>
> });
>
> }
>
> function onPointDragging(dataIndex, pos) {
>
> data[dataIndex] = myChart.convertFromPixel('grid', pos);
>
> // Update data
>
> myChart.setOption({
>
> series: [
>
> {
>
> id: 'a',
>
> data: data
>
> },
>
> {
>
> id: 'b',
>
> data: data2
>
> },
>
> ]
>
> });
>
> }
>
>
>
>
>
>
>
> Managing Partner* |* BRI, LLC *|* www.bri-associates.com *|* +1 (503)
> 853-4656
>
>
>