标签: react-native-chart-kit

我期待使用react-native-chart-kit 创建可水平滚动的StackedBarChart。是否可以用这个包创建这样的图表以及如何创建？

我正在react-native-chart-kitReact Native Expo 应用程序中使用来渲染图表。文档中提供的示例工作正常

问题：在我的应用程序中，需要图表来填充父容器，但图表似乎必须将 propsheight作为固定值。

<LineChart
    height={221}
    ...
/>

尝试将值设置height为100%或删除定义将导致 NaN 相关错误

不变违规： [.....,"y1":"<>","x2":"375","y2":"<>"}] 不能用作本机方法参数

这个问题有解决办法吗？谢谢你！

基于文档的工作示例

export default class Chart extends Component {

    render() {
        const data = {
            datasets: [{
                data: [
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100,
                    Math.random() * 100
                ]
            }]
        }

        return (
            <LineChart 
                data={data}
                width={Dimensions.get('window').width}
                height={221}
                yAxisLabel={'$'}
                chartConfig={{
                    backgroundColor: '#e26a00',
                    backgroundGradientFrom: '#fb8c00',
                    backgroundGradientTo: '#ffa726',
                    decimalPlaces: …

所以我想在图表上画两条线，我使用 给每条线不同的颜色color。我也想给每条线不同的阴影。但是，通过更改withShadow，它可以同时true适用于两者，也false可以适用于两者，而不能分别适用于每个。我希望我可以为一个数据集使用阴影，而不是另一个数据集，或者为每个数据集使用不同的颜色。

<LineChart
  data={{
    labels: dataDayOfWeek,
    datasets: [
      {
        data: dataValueNew,
        color: `rgba(25, 255, 12, 1)`,
      },
      {
        data: dataValueOld,
        color: `rgba(25, 255, 12, 0)`,
        withShadow: false, //this did not work
      },
    ],
  }}
/>;

我尝试使用 Chart Kit 库运行基本的 React Native 应用程序，但出现此错误： 单击查看图像：执行 UI 块时抛出异常：__NSCFNumber firstObject：无法识别的选择器发送到实例 0xa3576e305374b97e

有人知道如何修复它吗？

这是我的代码：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LineChart, Grid } from 'react-native-svg-charts';

class LineChartExample extends React.PureComponent {
  render() {
    const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80];

    return (
        <LineChart
            style={{ height: 200 }}
            data={data}
            svg={{ stroke: 'rgb(134, 65, 244)' }}
            contentInset={{ top: 20, bottom: 20 }}
        >
          <Grid /> …

我真的很喜欢react-native-chart-kit 的简洁性，但是我在它如何显示数据方面遇到了问题。

它使用数据中的最低点作为底部，最高点作为顶部。可以选择从零开始，但如果我想从 5 开始怎么办？顶部也一样，如果我想显示5到90的范围怎么办？

我想知道是否有人对这张图有更多了解或者使用过其他可以做这些事情的东西？

谢谢

我正在使用https://www.npmjs.com/package/react-native-chart-kit并尝试制作一个图表以匹配以下设计规范：

我可以获得大多数选项来处理这个问题末尾附加的代码，但是我似乎无法弄清楚如何删除每个单独栏的不透明度，所以它最终看起来像这样：

我一直在仔细研究源代码并尝试使用道具和样式，但无济于事......任何帮助将不胜感激！

const { width: screenWidth } = Dimensions.get('window');

export type DataSet = {
  data: Array<Number>;
};

export type BarChartData = {
  labels: Array<String>;
  datasets: Array<DataSet>;
};

export interface SalesChartProps {
  data: BarChartData;
}

const chartConfig = {
  backgroundGradientFrom: '#Ffffff',
  backgroundGradientTo: '#ffffff',
  barPercentage: 1.3,
  decimalPlaces: 0, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(1, 122, 205, 1)`,
  labelColor: (opacity = 1) => `rgba(0, 0, 0, 1)`,

  style: {
    borderRadius: 16,
    fontFamily: 'Bogle-Regular',
  },
  propsForBackgroundLines: …