I'm migrating to amCharts5 but I'm having some issues with labelling axis. Is the following the correct way to add a title to the x axis? I'd prefer not to specify a percent and just add it to the axis container with a vertical layout etc.
chart.children.unshift(am5.Label.new(root, {
text: "This is a chart title",
fontSize: 25,
fontWeight: "500",
textAlign: "center",
x: am5.percent(50),
y: am5.percent(90),
centerX: am5.percent(50),
paddingTop: 0,
paddingBottom: 0
}));
I know this is odd but maybe my thoughts will help someone else: Yeah that looks good to me guy. I use a similar way. Been doing a lot with AM5 recently (multiple charts, dynamic stuff). Sometimes tough to find what you need on their docs but they have solid documentation I think. Their tutorials help a lot too. Here is their label docs if you haven't found it already:
https://www.amcharts.com/docs/v5/concepts/common-elements/labels/
I find it's easier to run their Codepens and mess around with that code to try achieve want you want in your code and then incorporate it.
Related
I have just started to use Xcode in my Mac, so I am pretty new. I know the basics but I don't know how to code icons into my script. For example, I namely want to add a thumbs up emoji, or a smile, but I really don't know how to really code that.
I have tried adding "👍", "thumbsup.fill" and I looked into other comments and tried their things, but it doesn't seem to work. all I see is a blank screen.
Anybody got suggestions?
You need to put an imageview and add the following code :
Image(systemName: "hand.thumbsup.fill")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 25.0, height: 25.0, alignment: .center)
I have recently come across beautiful icon animations in Apple's Home app. This is example of opening/closing garage doors: https://giphy.com/gifs/0it1uTDtVR1Uw1FByx
I wonder how to make these animations. There are ways I can think of:
Manually creating shapes and animating them in code (this would be so hard to do)
Using some animation tool and exporting *.gif frames (but in this way we will lose vector graphics)
Using some animation tool and exporting *.svg frames (is this efficient?)
Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation (Does such tool/program exist?)
Does anyone have experience with creating this type of animations? It would be great if you could share this experience :)
Obviously no answer will be exhaustive. Pure "CSS3 art" is route that I've seen people use because it can define complex geometry and animations precisely. But here are some ways I've looked into using SVGs.
You can actually embed a script tag in an SVG that animates the elements. Something like this:
<svg>
<!-- svg objects -->
<script><![CDATA[!
//... Javascript to animate svg objects...
]]></script>
</svg>
You can also use a library like snapsvg.io where the construction of an animated svg is done purely with JavaScript. Here's the example they use for their quickstart page:
var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
var smallCircle = s.circle(100, 150, 70);
var discs = s.group(smallCircle, s.circle(200, 150, 70));
discs.attr({
fill: "#fff"
});
bigCircle.attr({
mask: discs
});
smallCircle.animate({r: 50}, 1000);
Otherwise you can use a codeless animated-svg creator like this one.
Disclaimer: I haven't tested the codeless site past the demo plan and probably will never use it. My personal preference would probably be the first suggestion but a JavaScript library like snapsvg.io seems like a nice middle ground.
I would go with option 4. Using some animation tool that will generate code (for example JS/CSS) with all the shapes and animation
I think it can be done with a tool called lottie, which uses json file exported by AfterEffects plugin called bodymovin.
Lottie web docs
I want to add an image in my view. This image will change dynamically.
I want them to have the same dimension on my screen.
However, some images look bigger on screen.
Here is my code:
image: {
flex: 1,
width: 90,
height: 150,
resizeMode: 'contain',
marginTop: 15 ,
marginBottom: 15,
borderColor: 'white',}
The image is inside a view with flexDirection: row and flex:1
You are setting both flex and a fixed width/height, one of these properties is overlapping the other, flex tries to dynamically resize the component to fit it's proportion. If you need a fixed size for these images, try taking away the flex property. To check what this property does, and even play a little with it live, check the docs for react native on height and width (https://facebook.github.io/react-native/docs/height-and-width).
If you do need the image to be a fixed size, but also needs it to be in a certain portion of the screen with a certain flex, I'd recommend wrapping it inside a View that has the flex property, so the image itself doesn't change sizes and won't be incorrectly resized.
If this still doesn't give you the behavior you need, your only other option is to change the resizeMode to one more suitable to your needs, check further modes in the docs (https://facebook.github.io/react-native/docs/image#resizemode)
I'm using d3.pack because I'm using bubble chart. However, I'm using it as a wordcloud. How can I make this use more of the width and don't make it that tall?
Here is a jsfiddle
In the code I have width: 600px; height: 1500px; on the #cloud element. This makes it kind of clumsy.
Otherwise, how can I make it so they never overlap each other? That could be an issue when making the screen smaller.
Thanks in advance
I have looked for an animation that moves image forward, at the same time flips and grows, to give the impression of walking forward. I tried creating this in photoshop, which works, but I couldn't resolve the problem of the space it takes up, disrupting other more important items on the page. I have tried adapting the 'rocket' from http://www.the-art-of-web.com/css/css-animation/ but don't know enough to add the flip I will add image to show what i am trying to do. - ok it seems I dont have enough reputation to post images, but i dont know how to get reputation!! Images would appear consecutively left to right.
This is not the image I will be using but demonstrates what I need. The one I will be using is copyright. All except the front center image is the same image (when I use my original there will be four different images center front).
Any help would be greatly appreciated.
setTimeout(function() {
var thething = document.querySelector('.thething');
thething.style.transform = 'perspective(500px) rotateY(80deg) translateX(-500px)';
}, 1000);
.thething {
background-color: red;
transition: transform 5s;
transform: perspective(500px) rotateY(80deg);
height: 200px;
width: 500px;
margin-top: 100px;
}
<div class="thething"></div>
This is generally what it might take to do the animation; I know it's not quite as involved as what you described in your comment, but largely it would involve a lot of grunt work and changing the numbers around. Let me know if there's anything critical here that you'd have trouble theorizing a way to do it.