Related
I am trying to create a scrollbar like the one below using echarts
So far I have managed to get the scroll using dataZoom feature but I haven't been able to style it like a normal scroll bar.
const dataY = [
'a',
'b',
'v',
'd',
'e',
'f',
'x',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n'
]; // 名称
const dataX = [
20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60
]; // 数据
option = {
backgroundColor: '#1C1C1C',
grid: {
top: '10%',
right: '10%',
left: '10%',
bottom: '10%'
},
yAxis: [
{
type: 'category',
data: dataY,
axisLine: {
lineStyle: {
color: '#333333'
}
},
axisLabel: {
interval: 0,
margin: 10,
color: '#999999',
textStyle: {
fontSize: 11
},
rotate: '0'
},
axisTick: {
show: false
}
}
],
xAxis: [
{
axisLabel: {
padding: [3, 0, 0, 0],
formatter: '{value}',
color: '#999999',
textStyle: {
fontSize: 11
}
},
axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: '#333333'
}
},
splitLine: {
lineStyle: {
color: '#333333'
}
}
}
],
dataZoom: [
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 5,
right: 10,
top: '10%',
bottom: '10%',
start: 70,
end: 20,
brushSelect: false,
handleSize: '60%',
showDetail: false,
backgroundColor: '#000',
borderColor: '#000',
opacity: 1,
brushStyle: false,
handleStyle: {
color: '#FF6700',
borderColor: '#FF6700'
}
},
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 15,
end: 20,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
backgroundColor: 'transparent'
}
],
series: [
{
type: 'bar',
data: dataX,
barWidth: '5',
itemStyle: {
normal: {
color: '#FF6700',
shadowBlur: 4,
borderRadius: 100
}
},
label: {
normal: {
show: false,
lineHeight: 4,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#fff',
fontSize: 10
}
}
}
}
]
};
I am left with a weird scrollbar that works as it should be unfortunately looks really weird.
I had the exact same issue as you, and i found a turnaround.
Instead of using the datazoom from ECharts as a scrollbar, you can just use the overflow of the div of the chart, and you can costumize it as you want with css. First you need to comment or delete the part of the datazoom in you code and change the html and css as this:
<div class="grid" [style.width.%]="100" [style.height.%]="100" #wrapper>
<div class="ChartDiv" echarts [options]="options" [style.width.px]="ganttWidth" [style.height.px]="ganttHeight"></div>
</div>
Then you just have to define the css like this:
.grid {
overflow-y: scroll !important;
//hidden if you dont want the x-Axis to have a scroll
overflow-x: hidden !important;
}
//Change the css as you want
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
With this code, your graph will have this aspect:
Now you just need to change your css as you want the style of this xD.
I was trying to create an OTP screen with autofill functionality using the react-native-otp-inputs plugin. Everything is working fine, but when I try to add any button below this OTPInputs component the background colour of the button gets changed to a greyish one.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import OtpInputs from 'react-native-otp-inputs';
export function AuthenticationScreen({navigation}) {
useEffect(() => {
RNBootSplash.hide({duration: 250});
});
const otpRef = useRef();
const focusOTP = useCallback(() => {
otpRef.current.focus();
}, []);
const resetOTP = useCallback(() => {
otpRef.current.reset();
}, []);
return (
<View style={{backgroundColor: 'white', flex: 1}}>
<OtpInputs
style={{
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
paddingLeft: 30,
paddingRight: 30,
borderWidth: 1,
borderColor: 'blue',
}}
inputContainerStyles={{
borderWidth: 0,
borderBottomWidth: 1,
borderColor: 'black',
}}
inputStyles={{textAlign: 'center'}}
handleChange={(code) => console.log(code)}
numberOfInputs={6}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
marginVertical: 40,
borderWidth: 1,
borderColor: 'red',
}}>
<TouchableOpacity
style={{
height: 50,
width: 100,
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Continue</Text>
</TouchableOpacity>
</View>
</View>
);
}
This happens only if the all the otp fields are filled. Please find the attached screenshot for a detailed view.
As you can see I haven't added any background colour to touchable opacity, still it is showing a grey colour after the otp inputs are filled. What may be the reason for this ?
Apparently when you end editing the OTP fields it changes the next touchable opacity.
As workaround you can add self enclosed touchable opacity with no width and height like this
<TouchableOpacity/>
And here is a full example with your code
How to display form's input value in json format instead of alert?
Like this:
{
'username':'abcd',
'password':'kkkk'
}
this is the code
import React, { Component } from 'react';
import { Alert, Button, Text, TouchableOpacity, TextInput, View, StyleSheet } from 'react-native';
export default class App extends Component {
state = {
email: '',
password: '',
};
onLogin() {
const { email, password } = this.state;
Alert.alert('Credentials', `email: ${email} + password: ${password}`);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Hi, Welcome To</Text>
<Text style={styles.titleText}>Momento</Text>
<TextInput
value={this.state.email}
keyboardType = 'email-address'
onChangeText={(email) => this.setState({ email })}
placeholder='email'
placeholderTextColor = 'white'
style={styles.input}
/>
<TextInput
value={this.state.password}
onChangeText={(password) => this.setState({ password })}
placeholder={'password'}
secureTextEntry={true}
placeholderTextColor = 'white'
style={styles.input}
/>
<TouchableOpacity
style={styles.button}
onPress={this.onLogin.bind(this)}
>
<Text style={styles.buttonText}> Sign Up / Login </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'salmon',
},
titleText:{
fontFamily: 'Baskerville',
fontSize: 50,
alignItems: 'center',
justifyContent: 'center',
},
button: {
alignItems: 'center',
backgroundColor: 'powderblue',
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'white',
borderRadius: 25,
marginBottom: 10,
},
buttonText:{
fontFamily: 'Baskerville',
fontSize: 20,
alignItems: 'center',
justifyContent: 'center',
},
input: {
width: 200,
fontFamily: 'Baskerville',
fontSize: 20,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'white',
marginVertical: 10,
},
});
Try this might help
state = {
inputData:'',
};
onLogin() {
const { email, password } = this.state;
const data = {};
data.email = email;
data.password = password;
this.setState({inputData: JSON.stringify(data) });
// Alert.alert('Credentials', `email: ${email} + password: ${password}`);
}
<Text>{this.state.inputData}</Text>
I have to create a google area chart that has one line with the background fill but then also have additional lines that overlay it with no background fill. I can't figure out how to do this and am hopeful someone here knows. In the example image below the dashed blue lines are the ones I'm trying to figure out how to create.
you can use a ComboChart,
with both line and area series.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Area', 'Line 0', 'Line 1', 'Line 2', 'Line 3'],
['Apr', 70000, 18000, 42000, 80000, 118000],
['May', 90000, 18000, 42000, 80000, 118000],
['Jun', 100000, 18000, 42000, 80000, 118000],
['Jul', 75000, 18000, 42000, 80000, 118000],
['Aug', 60000, 18000, 42000, 80000, 118000],
['Sep', 20000, 18000, 42000, 80000, 118000]
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 72,
right: 16,
bottom: 60
},
height: '100%',
width: '100%',
seriesType: 'line',
series: {0: {type: 'area'}},
colors: ['orange', 'blue', 'blue', 'blue', 'blue']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
drawChart();
window.addEventListener('resize', drawChart, false);
function drawChart() {
chart.draw(data, options);
}
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I'm just getting some experience with Google Charts and I'm having a hard time understanding the difference between setting a width and height in the chart options vs. setting the width and height in the chart area settings. For example, I've seen this done:
var options = {
width: '500px',
height: '400px',
chartArea: {
left: "15%",
top: "5%",
height: "80%",
width: "75%"
},
//chartArea: { top: 10, left: 80, bottom: 50 },
legend: { position: 'bottom', alignment: 'start' },
annotations: { alwaysOutside: true},
hAxis: {
gridlines: { count: 10 },
},
If I had to guess, this is telling Google Charts to use a 'canvas' size of 500 x 400 pixels but the chart itself should only consume 75% of the width of that and 80% of the height. Is this correct?
chart options height & width are for the entire chart in respect to the chart's container,
including axis labels, titles, legends, etc...
option chartArea is for the inside portion of the chart,
where the plot actually occurs, excluding any labels on the edges...
the following options will stretch the chart to the full width and height of the chart's container,
and stretch the chart area to the full width and height of the chart,
leaving room on the edges for the labels (top, left, bottom, right)
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 32,
bottom: 32,
right: 16
},
height: '100%',
width: '100%',
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var chart = new google.visualization.ChartWrapper({
chartType: 'ScatterChart',
containerId: 'chart',
dataTable: google.visualization.arrayToDataTable([
['x', 'y'],
[10, 15],
[15, 13],
[18, 20],
[24, 26],
[34, 30],
[40, 43],
[49, 48],
[50, 55],
[65, 67],
[70, 70],
[72, 70],
[73, 70],
[80, 85]
]),
options: {
chartArea: {
height: '100%',
width: '100%',
top: 32,
left: 32,
bottom: 32,
right: 16
},
height: '100%',
width: '100%',
legend: {
position: 'top'
}
}
});
chart.draw();
window.addEventListener('resize', function () {
chart.draw();
}, false);
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart"></div>