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 <step...@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 > > >
