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
