KLineChart
KLineChart copied to clipboard
[Feature] Auto Shape Points and Mouse Pointer onEnter
Feature Description
Not sure if it is implemented. Checked the source code but can not figure this out.
I am creating Long / Short Shapes where I place one point p0 on the chart and other points p1, p2, p3 are placed automatically (totalStep is 2) and can be edited later:

Everything is working good but the problem is when I want to restore the shape from JSON object
chart.createShape({
"name":"Long",
"points":[
{"timestamp":1660244400000,"value":23479.64023722628,"dataIndex":715},
{"value":23479.64023722628,"dataIndex":735},
{"value":23279.64023722628,"dataIndex":715},
{"value":23679.64023722628,"dataIndex":715}
],
onMouseEnter: function ({ id, event }) {
$("canvas").css("cursor", "pointer");
},
onMouseLeave: function ({ id, event }) {
$("canvas").css("cursor", "default");
},
onRemove: function ({ id }) {
$("canvas").css("cursor", "default");
},
});
To Do
shape Long :
chart.addShapeTemplate({
name: 'Long',
// totalStep: 5,
totalStep: 2,
checkEventCoordinateOnShape: ({ type, dataSource, eventCoordinate }) => {
return checkCoordinateInRect(dataSource[0], dataSource[2], eventCoordinate)
},
createShapeDataSource: ({ step, mode, points, coordinates, viewport, precision, xAxis, yAxis }) => {
let greenPolygons = []
let redPolygons = []
let lines = []
let texts = []
if (points.length == 1) {
// 3
// 0 1
// 2
p0 = points[0]
points.push({value: p0.value, dataIndex: p0.dataIndex+20}) // p1
points.push({value: p0.value-100, dataIndex: p0.dataIndex}) // p2
points.push({value: p0.value+200, dataIndex: p0.dataIndex}) // p3
// coordinates.push({x:xAxis.convertToPixel(points[1].dataIndex), y:yAxis.convertToPixel(points[1].value)})
// coordinates.push({x:xAxis.convertToPixel(points[2].dataIndex), y:yAxis.convertToPixel(points[2].value)})
// coordinates.push({x:xAxis.convertToPixel(points[3].dataIndex), y:yAxis.convertToPixel(points[3].value)})
}
if (coordinates.length > 1) {
greenPolygons.push([
{ x: coordinates[0].x, y: coordinates[3].y},
{ x: coordinates[1].x, y: coordinates[3].y},
{ x: coordinates[1].x, y: coordinates[0].y},
{ x: coordinates[0].x, y: coordinates[0].y},
]);
redPolygons.push([
{ x: coordinates[0].x, y: coordinates[0].y},
{ x: coordinates[1].x, y: coordinates[0].y},
{ x: coordinates[1].x, y: coordinates[2].y},
{ x: coordinates[0].x, y: coordinates[2].y},
]);
// entry line
lines.push([{ x: coordinates[0].x, y: coordinates[0].y }, { x: coordinates[1].x, y: coordinates[1].y }])
}
return [
{
type: 'line',
isDraw: true,// Whether you want to draw, you can default, draw by default
isCheck: false,// Whether to check whether it is on the graph, it can be defaulted, not checked by default
dataSource: lines
},
{
type: 'text',
isDraw: true,
isCheck: false,
dataSource: texts
},
{
type: 'polygon',
isDraw: true,
isCheck: true,
dataSource: greenPolygons,
styles: { style: 'fill', fill: { color: 'rgba(8, 153, 129, 0.2)' } },
}, {
type: 'polygon',
isDraw: true,
isCheck: true,
dataSource: redPolygons,
styles: { style: 'fill', fill: { color: 'rgba(242, 54, 69, 0.2)' } },
}
]
}
});
my questions are:
- is this possible
- is my solution right for mouse cursor change onEnter
doesn't work?