不同颜色的折线图与反应本机图表套件

Question

我正在使用 react-native-chart-kit 插件，并且想要在蓝色区域之外绘制一条用绿色和红色填充的线，如图所示。谁能说这是否可能，如果可以，我怎样才能实现这一目标？

折线图 小吃

Answer 1

我认为尚不支持根据需要更改线条颜色的可能性。

我的建议是改变点的颜色。这可以使用函数“getDotColor”来完成。例如，上一个版本（6.11.0）就支持这一点。

然后你可以像这样定义你的函数：

getDotColor={(dataPoint, dataPointIndex) => {
          if(dataPoint > 70 || dataPoint< 35) 
          return '#ff0000';// red
          else  return '#00ff00';// green
        }}

Answer 2

react-native-chart-kit 不支持此功能。然而，还有另一个强大的图表库 - react-native-gifted-charts 可以用来非常轻松地实现此功能。

react-native-gifted-charts

中的

<LineChart/>组件接受名为highlightedRange的道具，您可以在其中定义线条以不同方式呈现的范围。

在上图中，位于 5 和 12 之间的线条部分为绿色。这是通过使用

highlightedRange

 道具-

来实现的

highlightedRange={{
  from: 5,
  to: 12,
  color: 'green',
}}

上图的完整代码是-

import React from 'react';
import {LineChart} from 'react-native-gifted-charts';

const App = () => {
    const data = [
        {value: 6}, {value: 6}, {value: 8}, {value: 5}, {value: 5}, {value: 8}, {value: 0}, {value: 8}, {value: 10}, {value: 10}, {value: 12}, {value: 15}, {value: 20}, {value: 22}, {value: 20}
      ];
    
      return (
        <LineChart
          data={data}
          spacing={22}
          thickness={5}
          color='red'
          hideRules
          hideDataPoints
          xAxisThickness={0}
          yAxisThickness={0}
          highlightedRange={{
            from: 5,
            to: 12,
            color: 'green',
          }}
        />
      );
};

export default App;