尝试在 React-Native 中的 Victory 图表中的条形图中创建对角虚线线性渐变

问题描述

The charts should look something like this

我的大部分功能都在工作：

The way the charts look now.

这是代码：

 <VictoryStack
        animate={{ duration: 500 }}
        height={60}
        padding={{ left: 15,top: 0,bottom: 30,right: 15 }}
        horizontal
        style={{ data: { width: 24 } }}>
        <VictoryBar
          style={{ data: { fill: Colors.score.detractors } }}
          data={[{ x: 1,y: detractor }]}
          cornerRadius={
            passive === 0 && promoter === 0
              ? {
                bottomLeft: 10,bottomright: 10,topLeft: 10,topRight: 10,}
              : { bottomLeft: 10,bottomright: 10 }
          }
          labels={() => `${detractor}%`}
          labelComponent={
            <VictoryLabel
              x={45}
              dy={25}
              textAnchor="end"
              verticalAnchor="start"
              style={labelStyle}
            />
          }
        />

        <VictoryBar
          animate={{ duration: 500 }}
          style={{ data: { fill: Colors.score.passives } }}
          data={[{ x: 1,y: passive }]}
          cornerRadius={
            detractor === 0 && promoter === 0
              ? {
                bottomLeft: 10,}
              : detractor === 0
                ? { bottomLeft: 10,bottomright: 10 }
                : promoter === 0
                  ? { topLeft: 10,topRight: 10 }
                  : {}
          }
          labels={() => `${passive}%`}
          labelComponent={
            <VictoryLabel
              x={200}
              dy={25}
              textAnchor="end"
              verticalAnchor="start"
              style={labelStyle}
            />
          }
        />

        <VictoryBar
          animate={{ duration: 500 }}
          style={{ data: { fill: Colors.score.promoters } }}
          data={[{ x: 1,y: promoter }]}
          cornerRadius={
            passive === 0 && detractor === 0
              ? {
                bottomLeft: 10,}
              : { topLeft: 10,topRight: 10 }
          }
          labels={() => `${promoter}%`}
          labelComponent={
            <VictoryLabel
              dx={0}
              dy={25}
              textAnchor="end"
              verticalAnchor="start"
              style={labelStyle}
            />
          }
        />
      </VictoryStack>

但我不知道如何在条形图中添加这些斜虚线渐变线作为填充。

我需要修改 react-svg 还是 Victory-charts 可以开箱即用？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）