Original position
original
When Button moving to the left
executed
https://codesandbox.io/s/material-demo-forked-hwvxl?file=/demo.js
Please tell me how to do it, thanks
you just add marginLeft t your paper as the same margin as your button
margins indicate how many spacing is there between elements , and it can be set in all 4 directions or on one of the axis
paper: {
maxWidth: 400,
minWidth: 100,
marginLeft : 50 // here
},
btn: {
marginLeft: 50 // same as this
}
Related
I'm working with line-polar eCharts on Angular, and I ran into a problem with areaStyle. I want it to fill the whole area from the line to the outer most circle with the yellow color, but eCharts left out a little bit of empty space. I tried creating a shadowBlur and offsetX, Y it to the blank area, but the color is not the same. Is there a property of areaStyle I'm missing, or is there a library to fix this?
series = [{
coordinateSystem: 'polar',
name: this.legends[1],
type: 'line',
color: '#D9B100',
data: this.datasetCylinder.data,
smooth: true,
showSymbol: false,
lineStyle: {
show: true,
width: 3,
shadowBlur: 10,
shadowColor: 'gold'
},
areaStyle: {
color: 'gold',
origin: 'end',
opacity: 0.1
}
}]
A simple solution would be to add more points in between, but then chart yellow line might not have the correct form. Any suggestion is appreciated.
There is no easy solution but you can try to find it:
Draw the area outside the circle boundaries and then cut the excess with VisualMap.
Cut area in already filled circle by VisualMap with pieces.
Use custom series and draw all with polygons.
I have a stackview like this
I pinned the stackview like this:
Top: 200, Leading: 20, Trailing: 20, Bottom: 200
I want the stackview to be fixed to this size for every screen size, how do I achieve this?
Add leading, trailing, center vertically and aspect ratio 1:1 constraint to main StakeView.
Also, Add equal widths and equal heights constraint to each button.
Output :
Choose the Stack View and add Aspect Ration :
Then double click on the Aspect Ration around the Stack View and make the Multiplier 1:1 :
Then you can add Trailing and Leading constrains + Center Vertically in Safe Area.
The goal is to move the button layer vertically upwards from the bottom the middle of the screen, whilst growing to a larger size. However, upon clicking the layer it does not move to the exact center. It moves up but shifts to the right. Why is this?
Code
bg = new BackgroundLayer
backgroundColor: "#f39c12"
button = new Layer
width: 100
height: 100
borderRadius: 100
backgroundColor: "white"
x: Align.center
y: Align.bottom(-100)
button.on Events.Click, ->
button.states.next()
button.states =
StateA:
width: 300
height: 300
borderRadius: 300
y: Align.center
The reason is that Align.center is something that is only calculated when you create the layer or a state. For that reason, adding x: Align.center to the state also doesn't work (as you might expect it to).
However, there is an easy way to do this, by setting the midX property of the state to Screen.midX. Full example:
bg = new BackgroundLayer
backgroundColor: "#f39c12"
button = new Layer
width: 100
height: 100
borderRadius: 100
backgroundColor: "white"
x: Align.center
y: Align.bottom(-100)
button.on Events.Click, ->
button.states.next()
button.states =
StateA:
width: 300
height: 300
borderRadius: 300
y: Align.center
midX: Screen.midX
Working prototype can be found here: https://framer.cloud/RsULi
When you enlarge the height and width of the button, the button will enlarge, but its x and y properties may not change as you expect.
Instead, try adjusting scale in StateA:
button.states =
StateA:
borderRadius: 300
y: Align.center
scale: 3
I'm using echarts
this is my chart
this picture shows I lost some of my legends , so,how do I make bigger space for legends, is it possible to set more space for legends? or if it is possible to make my chart smaller how can I do?
I put
var option = {
grid: {
y: 30,
y2: 90,
},
y mean space before chart, y2 - after chart
Thanks for viewing and answering.
I am using Google Charts (TimeLine) to display information from database.
But the Google Chart reference only provide setting fix height for the chart.
Whereas I would like to change chart height based on the number of rows I get from data.
So I made the code:
var graph = $('#chart_timeLine').children()[0].children[0].children[1];
$(graph).css('height',graph.scrollHeight);
$(graph).css('overflow-y','auto');
Now the chart don't have a vertical scrollbar and I am satisfied.
But I found that the scalebar, which shows the the scale of timeline chart is missing.(It is actually hiding under the chart, instead of showing up at the bottom of the chart).
So then I changed scalebar's position to absolute and set it to the bottom of my chart.
Then it is ugly because it has a height of 200px, while the scale is at the bottom of that 200px, leaving a huge blank between my chart and the scale.
Is there a fix for that?
Thank you.
Instead of messing with the internal workings of the chart, set the height based on the number of rows of data in the DataTable:
// set a padding value to cover the height of title and axis values
var paddingHeight = 40;
// set the height to be covered by the rows
var rowHeight = data.getNumberOfRows() * 15;
// set the total chart height
var chartHeight = rowHeight + paddingHeight;
and then in the Timeline's options, set the height:
height: chartHeight
I tried the answer, but it did not work for me. The way I got it to work for me was this:
// Calculate height
var rowHeight = 41;
var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;
var options = {
height: chartHeight
}
The + 1 to the getNumberOfRows() is for the X-axis text.
$.ajax({
...
success: function(jsonData){
...
var options = {
height: (jsonData.length * 40) + 80,
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
});
As far as I can tell its:
30px height for each bar
10px padding for each group.
60px for the Series.
So for a 9 bar Group = (30 * 9) + 10 = 280px
Chart Height = 280px + 60px
If you are Grouping Rows you will need to determine if your date ranges overlap with any others in that group.
Google does this by:
Getting the Group items IN START DATE ORDER
Creating an empty array of Group Display Rows
For each Group Item:
For each Display Row
If Item fits in Row...
Add it to existing Display Row
Next
If No existing Display row found
Add New Display Row
Next