Javascript 自定义React本机图表工具包的颜色

已使用

React Native chart kit

软件包为React Native应用程序创建了一个基本折线图/面积图，如下代码所示

问题：我们如何独立更改绘图组件的样式/颜色？例如点、线笔划、面积、轴、记号标签等

当更改

chartConfig

中的

color

参数时，它似乎会影响几乎整个图表，包括轴刻度标签、网格线、线下区域

是否可以为图表的每个单独属性定义颜色

代码：

import { LineChart } from 'react-native-chart-kit';
import { Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width

const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
    data: [ 20, 45, 28, 80, 99, 43 ],
    color: (opacity = 1) => `rgba(134, 65, 244, ${opacity})`,
    strokeWidth: 2 // optional
}]
}

const chartConfig = {
backgroundGradientFrom: '#fff',
backgroundGradientTo: '#fff',
color: (opacity = 1) => `rgba(63, 143, 244, ${opacity})`,
strokeWidth: 2 // optional, default 3
}

class Test extends Component {
    render() {
        return (
            <LineChart 
                data={data}
                width={screenWidth}
                height={400}
                chartConfig={chartConfig}
            />
        )
    }
}

从'react native chart kit'导入{LineChart}；
从“react native”导入{Dimensions}；
const screenWidth=Dimensions.get（'window'）.width
常数数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
数据：[20,45,28,80,99,43]，
颜色：（不透明度=1）=>`rgba（134,65,244，${opacity}）`，
冲程宽度：2//可选
}]
}
常量chartConfig={
背景梯度来自：“#fff”，
背景梯度至：“#fff”，
颜色：（不透明度=1）=>`rgba（63143244，${opacity}）`，
笔划宽度：2//可选，默认为3
}
类测试扩展了组件{
render（）{
返回(
)
}
}

以下是我用来创建图表的代码。请参阅“propsForDots”部分以设置数据点的样式

我知道这只是你要求帮助定制的一部分，但这只是一个开始

<LineChart
  data={{
      labels: labelArray,
      datasets: [
          {
              data: valueArray
          }
      ]
  }}
  width={Dimensions.get("window").width} // from react-native
  height={220}
  yAxisInterval={1} // optional, defaults to 1
  chartConfig={{
  backgroundColor: "#444",
  backgroundGradientFrom: '#444',
  backgroundGradientTo: '#444',
  decimalPlaces: 2, // optional, defaults to 2dp
  color: (opacity = 1) => `rgba(0, 110, 199, ${opacity})`,
  labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
  style: {
      borderRadius: 16
  },
  propsForDots: {
      r: "6",
      strokeWidth: "2",
      stroke: "#fff"
  }
  }}
  bezier
  style={{
      marginVertical: 8,
      borderRadius: 16
  }}
/>

`rgba（01110199，${opacity}）`，
labelColor：（不透明度=1）=>`rgba（255，255，255，${opacity}）`，
风格：{
边界半径：16
},
道具：{
r:“6”，
冲程宽度：“2”，
笔划：“fff”
}
}}
贝塞尔
风格={{
Margin:8，
边界半径：16
}}
/>

在点的道具中，r是点的半径，笔划宽度是边框的大小，笔划是边框的颜色

---

我还在用这个库做实验，这就是我遇到这个问题的原因。希望这能帮助您和其他可能正在搜索相同内容的人。

对于点颜色，我们可以使用getDotColor道具，通过它，我们可以编辑每个点并为每个点定义颜色

getDotColor定义点颜色函数，用于计算折线图中点的颜色并获取（数据点、数据点索引）

---

你有没有发现是否有可能设计出单个点的样式？@Peru jansson还没有！

getDotColor={(dataPoint, dataPointIndex) => {
console.log('dataPoint ---->', dataPoint);
console.log('dataPointIndex --->', dataPointIndex);
//based on condition we return the color as string
if (dataPointIndex === 0) return 'red';
}}