what is the best performing way to render a time cursor in an echarts graph?
The idea is to synchronize the vertical cursor shown on one graph with another graph on the same page. While the mouse moves over one graph a vertical line is drawn. Now I'd like to have a similar line being shown at the same time location on the other graph.
I'm currently do this by sending a message with a timestamp to the other graph and add a series to the config with a markline:
{
type: 'line',
animation: false,
markLine: {
symbol: 'none',
label: {
show: false
},
lineStyle: {
type: 'solid',
color: '#000',
opacity: 1
},
data: [
{ xAxis: 0 }
]
}
}
On receiving the timestamp, the graph updates data[0].xAxis and the chart is re-rendered. With many charts being connected, it still feels sluggish and I believe that the rendering of the graph with just changing the markline series is still too expensive.
There are a few merge options wrt. the config, but I can't find one, that updates just the markline series or better just moves a line.
I was also trying 'connect', but that was connecting too much (e.g. selection, tooltip, etc.) and even slower than my current method.
There might be another option to render the line with ZRender, but I have not gone that far yet.
Any suggestions?
Cheers,
klaus
Related
I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],
Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}
I need format label in the markline. Is possible add image backround, or in general custom styling?.
Is possible draw the markLine over the candles?, because at the moment when the markline goes down, the candles cover the label.
I would like to do something like what is shown this picture:
EDIT:
This is my actual code
m.setOption(
{
series: {
markLine: {
symbol: 'none',
label:
{
position: 'middle',
show: true,
},
lineStyle: {
color: mc,
//type: 'solid'
},
data: [{yAxis: window.wsData[1], name: 'Tiker'}],
position: 'insideStartTop'
}
}
}
)
This labels has limit to improve deep custom design. By my opinion it's right decision because many developers don't understand design and other people will frustrate due incorrect style, color, position... But we are developers and no one can interfere with our love for real art, hehe )
Try to implement this options: https://stackoverflow.com/a/64875984/1597964
How can I exclude a specific data series from showing in the tooltip with tooltip.trigger = axis?
I'm asking because I have a very complex graph with one line chart, two bar charts and one heatmap. And the heatmap has so many data that the tooltip ends up with too many lines. The heatmap values are not very important, so I would like to remove them from showing in the tooltip.
Right now I'm using formatter to exclude them, but is there any other way?
I do exactly the same: adding a new attribute to the series and checking it from formatter.
Something like this:
series: [{
// ...
showInTooltip: true
// ...
}]
// ----
formatter: series => {
var displayed = series.filter(item => item.showInTooltip);
// work with displayed where showInTooltip === true
}
Also you can store callback instead attribute and it will work.
Updated: Suddenly I found undocumented feature and it will solved you trouble by the right way, apparently.
series: [{
// ...
tooltip: {
show: false
}
// ...
}]
Here is a full jsfiddle example
I use a custom series and draw a polygon:
data = [
[80.9251933067, 207.9047427038],
[52.8853803102, 337.7443022089],
[25.9926385814, 120.3586150136]
];
I use echarts.graphi.clipPointsByRect() (like in this echarts-example) to make sure, the polygon is not drawn outside of the grid.
echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
Initially the polygon is drawn correctly, like this:
But when I zoom in, the polygon is distorted: e.g. you can click the zoom part buttom below the chart to zoom from 40 to 60 - in this case I'd expect to see the part of the shape (like highlighted in yellow in the image above) - but instead I see this distorted image:
Maybe this function is not meant for this use-case, or is this a bug?
Is there another function for this use-case or does anyone know a workaround?
Update
Version 4.4.x contains a new clip feature. This makes it easy to avoid the distortion:
in the render function we don't need to clip our shapes: i.e. no need to call clipPointsByRect()
instead we just activate clip on the custom series:
New series definition with clip: 'true':
series: [{
type: 'custom',
clip: 'true',
renderItem: renderItem,
data: data
}]
Here is an updated jsfiddle expample
Original Version
it seems that the function is really not working as expected - see echarts-source code comment:
export function clipPointsByRect(points, rect) {
// FIXME: this way migth be incorrect when grpahic clipped by a corner.
// and when element have border.
I've created an issue #10222 for the e-charts project
A workaround for now is to use a custom clipping function
e.g. lineclip supports the Sutherland-Hodgman algorithm for polygon clipping
Here is the updated jsfiddle-example that shows the correct result when you zoom in:
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.