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

Question

图表应该看起来像这样

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

图表现在的样子。

这是代码：

 <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,
                bottomRight: 10,
                topLeft: 10,
                topRight: 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,
                bottomRight: 10,
                topLeft: 10,
                topRight: 10,
              }
              : { topLeft: 10, topRight: 10 }
          }
          labels={() => `${promoter}%`}
          labelComponent={
            <VictoryLabel
              dx={0}
              dy={25}
              textAnchor="end"
              verticalAnchor="start"
              style={labelStyle}
            />
          }
        />
      </VictoryStack>

但我不确定如何将那些对角虚线渐变线添加为条形图中的填充。

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

标签： react-nativevictory-charts