wuxudong / react-native-charts-wrapper Goto Github PK
View Code? Open in Web Editor NEWa react native charts wrapper (support android & iOS)
a react native charts wrapper (support android & iOS)
cd Example
npm install
`npm ERR! addLocal Could not install /home/ijoy/show
npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! code EISDIR
npm ERR! errno -21
npm ERR! syscall read
npm ERR! eisdir EISDIR: illegal operation on a directory, read
npm ERR! eisdir This is most likely not a problem with npm itself
npm ERR! eisdir and is related to npm not being able to find a package.json in
npm ERR! eisdir a package you are trying to install.
npm ERR! Please include the following file with any support request:`
hi, it's not a issue, just some question, feel free to close if need :)
I notice that in swift 2.0 previous project react-native-ios-charts
define custom property in both header file and implement file, then get the value from js side via swift setter, I follow this way and it works well.
Today I upgrade my project to swift 3.0, strangely I notice that setter feature like setConfig
no longer be called, I don't know how to get custom property value from js side in swift 3.0, and I check your smart project but also have no idea,
how should I get custom property value from js side in swift 3.0?
thanks for your time,
regards.
ReactNativeCharts/utils/BridgeUtils.swift:24:26: Extraneous argument label 'string:' in call
Fix-it Delete "string: "
I add drawCircleHole
property like below format to LineChart
data={{
dataSets: [ { config: { drawCircleHole: true, circleHoleColor: processColor('yellow'), }, }, ...]
}}
but it seems not work, then I find that bridge config also receive drawCircleHole
property, why does't make sense?
thanks for your time.
Hello,
How can i draw cubic lines chart with LineChart component or any component ?
android emulator.
npm install
react-native run-android
UNEXPECTED TOP-LEVEL EXCEPTION:
com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim;
at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
at com.android.dx.command.dexer.Main.run(Main.java:277)
at com.android.dx.command.dexer.Main.main(Main.java:245)
at com.android.dx.command.Main.main(Main.java:106)
:app:dexDebug FAILED
FAILURE: Build failed with an exception.
com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/home/ijoy/tools/jdk1.8.0_101/bin/java'' finished with non-zero exit value 2
BUILD FAILED
Total time: 3.841 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
hi, thanks for your help that merging ios and and project.
I also get many swift 3.0 compile error by following setup staging, how about your setup environment, maybe I did something wrong.
thanks for your time.
PS: I notice Charts project remove previous swift 3.0 support branch and some inner maintainer fork the new repo here, have you follow it in your test case?
npm ERR! Failed to parse json npm ERR! Trailing comma in object at 25:1 npm ERR! } npm ERR! ^
remove comma
"Charts"
]
data: {
dataSets: [{
values: [{y: 23}, {y: 105}, {y: 102}, {y: 110}, {y: 114}, {y: 109}, {y: 105}, {y: 99}, {y: 95}],
config: {
colors:[processColor('#d3d3d3')],
valueTextSize: 13,
valueTextColor: processColor('green'), // not working
valueFormatter: "##",
barSpacePercent: 40,
barShadowColor: processColor('lightgrey'),
highlightAlpha: 90,
highlightColor: processColor('red'),
}
}],
},
Thank you
请问怎么设置才能做到以下的这种:
比如设置x轴两个label之间的间距固定(假设为60),然后我会有n个数据那么这个长度就是(n-1)*x,如果这个长度大于屏幕的宽度,那么这个图表就可以左右滑动,跟设置了zoom属性的scaleX属性大于1一样
Thanks!
It doesn't show MarkerView When clicking on a point in example ‘s lineChart.
code:
this.state = {
...
marker: {
enabled: true,
type: 'oval',
backgroundTint: processColor('teal')
}
...
};
<LineChart
style={styles.chart}
data={this.state.data}
description={{text: ''}}
legend={this.state.legend}
marker={this.state.marker}
... >< LineChart >
add code :(in LineChart props)
drawMarkers = {true}
Also wrong!
Hello!
I'd like some help to get the labels onscreen. A little more to the left and it would be perfect.
I checked Charts wiki and tried setting spaceMin and spaceMax but it didn't seem to affect the labels.
Any ideas?
Thanks in advance 😊
我用的fillColor:'#W5D5F4',会报错,但是我传number又没有效果
thanks wuxudong, this issue is for coming soon feature.
rotationEnabled should be added to pie and radar
The fields entryLabelColor and entryLabelTextSize do not appear to do anything on the pie chart. Setting them as
entryLabelColor={processColor('black')}
entryLabelTextSize={1}
simply returns the same white font. Same results no matter how I edit them.
This also occurs in the example application. All other functionality is as expected in my installation.
rn version "0.41.2"
I find that usePercentValues
property could compute percent value of pie chart, but how should I format along %
from result?
thanks a lot,
regards.
can I set xAxis below chart?
Attempting to integrate into existing project. Followed all the steps for install until it comes to linking the bridging header.
Docs state "You should make sure set this file in your target -> Build Settings -> Swift Compiler - General -> Object-C Bridging Header."
My project doesn't appear to have a Swift Compiler category under build settings, so there's no place for me to specify the bridging header.
Hi,
Are planning to support more gesture callbacks like scale or doubletap?
The Pod install command for swiftyjson fails.
I tried manual install, I get errors saying:
2017-04-03 00:29:22.117 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNBarChart" does not exist
2017-04-03 00:29:22.117 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNHorizontalBarChart" does not exist
2017-04-03 00:29:22.117 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNBubbleChart" does not exist
2017-04-03 00:29:22.118 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNCandleStickChart" does not exist
2017-04-03 00:29:22.118 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNLineChart" does not exist
2017-04-03 00:29:22.119 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNPieChart" does not exist
2017-04-03 00:29:22.119 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNRadarChart" does not exist
2017-04-03 00:29:22.119 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNScatterChart" does not exist
2017-04-03 00:29:22.119 [warn][tid:com.facebook.react.JavaScript] Warning: Native component for "RNCombinedChart" does not exist
Trying to get it fixed for several hours, I tried the example for beginners step by step and couldn't get it to work either. can you advise?
const chartDataSetConfig = {
common: {
valueTextSize:PropTypes.number,
// ,,,
},
There is no valueTextColor or valueTextColors。。。
I want to format the labels in yAxis, the values are bytes.
For example, the value is 310241024, I want to show it as 3MB in yAxis.
Is it possible, thanks!
@wuxudong thanks for the library!
I'm making a financial app that's using candlestick chart to show prices.
I need my chart to zoom my chart to show only latest X values out of hundreds available. I managed to do that with zoom
prop.
Also, I need my chart to show the latest available value at the right side of the chart. By default it starts with the first value and the left side. Is there a way to do that?
I dont find any implementation of multiple colors for Lines ? Like red before Y: 0 and green after Y:0. Is there a way to do that with that wrapper ?
**packages versions**
react : 16.0.0-alpha.6,
react-native : 0.43.4,
react-native-charts-wrapper : 0.2.8,
Somehow I can't seem to get it work.. all I see using the examples is a white screen with a red vertical red line on the left side. Or am I doing anything wrong??
thanks for your smart project.
I want to add callback which could pass x and y axis data in iOS side like android gesture of LongPressed effect, but I don't know which property could implements it.
please notice this link.
void onChartLongPressed(MotionEvent me);
thanks for your time.
regards :)
hi, thanks for your latest release, it's wonderful :)
I encounter below error when I set animation
property, I find that native thread will crash while js side could still run.
And if I remove animation
property from my chart config object, all thing back to normal.
I try to figure out reason and have no idea, just provide my data config as below json format,
the first one is basic config before I fetch remote data, and the second one is fill data which be fetch from remote server.
would you mind take a look, I debug many times but cannot find any problem except the config possible.
basic config before fill remote data
fill remote data after http request
basic_config_with_filling_data.txt
thanks for your time,
regards.
I hope you can make an improvement to wrap ios source code in a library to avoid adding source code to Build Phrases -> compile sources
It defined as :
valueFormatter: PropTypes.oneOfType([
PropTypes.oneOf(['largeValue', 'percent']),
PropTypes.string
]),
Hey, first of all, thanks for an awesome component!
I have a problem regarding using it with a LineChart:
let lineData={
dataSets:[ {
values: [67, 25, 76, 82, 81, 79],
// ...
}],
};
let linexAxis = {
valueFormatter: [
'2016-11',
'2016-12',
'2017-01',
'2017-02',
'2017-03',
'2017-04',
],
};
I found when data set more than 4 length, the render is something wrong...
图片死活传不上,只好先放到临时网站上了。。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.