Take a look at this simple demo project I grabbed from their site:
https://ecomfe.github.io/echarts-examples/public/editor.html?c=dynamic-data2
Only thing I changed is the value of showSymbol. From false to true. So you can see the little dots on the line and how they slowly grow until they reach their final size. Since I can't save my own version of this demo you'll have to do so aswell to see what I mean.
There is a property called animation for series. This will in fact disable the grow animation, but will also disable all other animations connected with this series. For example the smooth transition to the left when new datapoints are added.
I don't want to hide the markers. I want them there, but without that animation.
Does anyone know of a way to achive this?
series: [{
name: '模拟数据',
type: 'line',
showSymbol: true,
hoverAnimation: false,
data: data,
animation: false
}],
animation: true
This can help disable the item animation while keeping animation of the X axis. But I'm afraid there's nothing more we can do with the line animation.
Related
To visualise a large amount of data points +9000 markers I am switching from Plotly.js 'scatter' type to 'scattergl'.
I use react-plotly.js, and the change from 'scatter' to 'scattergl' almost works. Everything is rendered fine except the markers itself. The axes, hover indications, zoom controls, ... all work.
The screenshots show the difference. Documentation about scattergl is hard to find, but am I just missing some gl specific configuration?
My code to calculate the traces:
const plotData: Partial<PlotData> = {
type: 'scattergl',
mode: 'lines+markers',
x: [...],
y: [...],
};
After a long bug hunt, the solution/bug ended up being a z-index fight. I rendered the plot inside a Leaflet popup which had a canvas z-index definition set. Overriding this solved my render issue.
I want to use enter/leave transitions in vue.js, using the built in javascript hooks for transitions:
https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
My animation library of choice is GSAP: https://greensock.com/
Both, my enter function enter: function(el, done) {} and my leave function leave: function(el, done) {} are called correctly.
The enter animation works just fine — but the leave animation doesn't do anything.
I guess it is a GSAP related thing I do not understand yet. I tried resetting the animation and clearing the inline styles of the animated element. Didn't help.
Here is the codepen:
https://codepen.io/Sixl/pen/oGwOKW?editors=0011
Here's a fixed version: https://codepen.io/GreenSock/pen/veJGmR?editors=0010
I noticed a few problems:
You were calling done() immediately instead of waiting for the animation to complete. I just moved it to an onComplete callback.
You created a single timeline that you were adding all your animations to, but that isn't very appropriate in this case because it's not a linear thing - the clicks could happen anytime. So the playhead on the timeline reaches the end of the first animation, and then when you place a new one at the end (much later, when someone clicks), the playhead would already be way past that spot where you're placing it, causing it to jump to the end on the next render (appropriately). It's cleaner to simply use a TweenMax here instead. Or you could create a new TimelineLite each time there's a click (don't worry - it's fast).
--
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
If you have any more questions, don't hesitate to swing by the GreenSock forums. https://greensock.com/forums/ where there's a great community focused on helping people with GSAP questions.
Happy tweening!
i have a GridLayout with a Button and an image to display inside the Button. when i run my app the Image in the button sometimes centers and sometimes it don't. why? i believe it should always be centered.
.kv file:
MyLayout:
cols: 2
height: self.minimum_height
pos: root.pos
Button:
size_hint_y: None
height: self.parent.width/2
Image:
source: 'Images/employee/userprofile.png'
size: self.parent.size
center_x: self.parent.center_x
center_y: self.parent.center_y
the following image is what I expect every time:
this is what I get sometimes:
This is a common issue with alias properties like center_x, right, top, etc. Setting them in kv doesn't automatically bind to the size of the widget (adding that to kivy is not as trivial as it sounds), so while the image is positionned correctly at first, if it's resized after, then the position is not updated, because the parent's pos didn't change, only the children's size! As luck would have it, in such situation, it's not uncommon to have code that seems to work half of the time, depending on the timing of dispatching in that particular run.
Anyway, the solution is quite simple, explicitly reference the children's size in the bindings, so the expression is recomputed every time it changes.
center_x: self.width and self.parent.center_x
center_y: self.height and self.parent.center_y
I am trying to animate the change between layouts of a Cytoscape.js graph.
When switching from cose to grid, the change is animated. When switching from grid to cose, only the end position is shown without any animation.
I use a simple test scenario starting with a small graph in grid layout and this code to switch layouts:
...
function changeLayout(type){
var options = {
name: type,
animate: true
};
cy.layout(options);
}
...
<div onclick="changeLayout('cose')">to cose</div>
<div onclick="changeLayout('grid')">to grid</div>
I also tried the other options listed here:
http://js.cytoscape.org/#layouts/cose
but I am not able to animate from grid to cose.
What am I doing wrong?
A continuous layout like CoSE animates live. That is, it animates during the iterations of the calculations it does. If the layout runs very quickly -- as CoSE often does -- then you won't get much if any animation.
There is a proposal being discussed to have an option to animate continuous layouts like discrete ones (i.e. tweening between the start and end positions).
If you want this behaviour for now, you'll have to run the layout while batching. Now that you have saved the start and end positions for each node, you can just end batching and animate.
You can do this now using animate: 'end' in the layout definition. See https://github.com/cytoscape/cytoscape.js/blob/unstable/src/extensions/layout/cose.js#L31. This will animate the nodes from their initial starting position to their end position, in contrast with animate: true which will animate the changes in the layout, and only do so after a certain threshold of time (see animateThreshold).
I am using highcharts in my app and it has a problem which is: when I scroll the pointer to point in a different place in the chart the whole chart is scrolled while the point still in its position.
For more explanation please try this link in browser and mobile:
http://www.highcharts.com/stock/demo/basic-line
I just need the mobile behave as the browser behaviour.
You need to disable panning and pinchType.
chart: {
panning: false,
pinchType: false
}
Example: http://jsfiddle.net/bL4bqcLv/3/