【问题标题】:RadarChart questions雷达图问题
【发布时间】:2019-10-07 15:18:25
【问题描述】:

我已经修改了RadarChart 示例。

  • 我想在数据集值上画一个完整的圆圈,在下面屏幕截图的蓝线上。
  • 我想仅在 x 轴上绘制网格线并将其颜色设置为黑色(现在为红色)并去掉 y 轴上的比例值并将线条颜色设置为黑色。

状态如下:

{
        data: {
          $set: {
            dataSets: [
              {
                values: [
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 },
                  { value: 1 }
                ],
                label: "Too High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 },
                  { value: 0.75 }
                ],
                label: "High",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#F1DB93"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "OK",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#CADFB8"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 },
                  { value: 0.25 }
                ],
                label: "Too Low",
                config: {
                  color: processColor("#000000"),
                  drawFilled: true,
                  fillColor: processColor("#D9C5C5"),
                  fillAlpha: 100,
                  lineWidth: 0,
                  drawValues: false
                }
              },
              {
                values: [
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 },
                  { value: 0.5 }
                ],
                label: "DS 1",
                config: {
                  color: processColor("#0022F5"),
                  lineWidth: 2,
                  drawValues: false,
                  drawCircles: true,
                  circleColor: processColor("#0022F5"),
                  drawCircleHole: false,
                }
              }
            ]
          }
        },
        xAxis: {
          $set: {
            valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"]
          }
        },
        yAxis: {
          $set: {
            axisMinimum: 0,
            axisMaximum: 1
          }
        }
      }

还有控制道具:

<RadarChart
            style={styles.chart}
            data={this.state.data}
            xAxis={this.state.xAxis}
            yAxis={this.state.yAxis}
            chartDescription={{ text: "" }}
            legend={this.state.legend}
            drawWeb={true}
            webLineWidth={0}
            webLineWidthInner={1}
            webAlpha={255}
            webColor={processColor("red")}
            webColorInner={processColor("green")}
            skipWebLineCount={0}
            onSelect={this.handleSelect.bind(this)}
            onChange={event => console.log(event.nativeEvent)}
            rotationAngle={-115}
          />

重现问题的步骤

看来:

                  drawCircles: true,
                  circleColor: processColor("#0022F5"),
                  drawCircleHole: false,

对圆圈没有影响。

我不知道如何处理 y 刻度。

任何帮助表示赞赏。

请注意,我在 mpandroidchart 上使用 react-native-charts-wrapper。

任何帮助表示赞赏。


编辑 2019 年 10 月 17 日

长话短说,我为 RadarChart 创建了一个webAlphaInner property,它允许我使“内网”线条透明。 蓝线上没有圆圈。

【问题讨论】:

    标签: mpandroidchart react-native-charts-wrapper


    【解决方案1】:
    1. 绘图圈 - 我无法找到具有 drawCircle 支持。
    2. 对于第二个查询

      • 将红色更改为黑色 - 此红色是 webColor。 webColor={processColor("black")}

      • 摆脱规模 - 在 Yaxis 集中 enabled: false,

      • 将线条颜色设置为黑色 - 在此我假设您的意思是绿色线条。 webColorInner={processColor("black")}

    这里是完整的代码 sn-p
    状态

    {
            data: {
              $set: {
                dataSets: [
                  {
                    values: [
                      { value: 1 },
                      { value: 1 },
                      { value: 1 },
                      { value: 1 },
                      { value: 1 },
                      { value: 1 },
                      { value: 1 }
                    ],
                    label: "Too High",
                    config: {
                      color: processColor("#000000"),
                      drawFilled: true,
                      fillColor: processColor("#D9C5C5"),
                      fillAlpha: 100,
                      lineWidth: 0,
                      drawValues: false
                    }
                  },
                  {
                    values: [
                      { value: 0.75 },
                      { value: 0.75 },
                      { value: 0.75 },
                      { value: 0.75 },
                      { value: 0.75 },
                      { value: 0.75 },
                      { value: 0.75 }
                    ],
                    label: "High",
                    config: {
                      color: processColor("#000000"),
                      drawFilled: true,
                      fillColor: processColor("#F1DB93"),
                      fillAlpha: 100,
                      lineWidth: 0,
                      drawValues: false
                    }
                  },
                  {
                    values: [
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 }
                    ],
                    label: "OK",
                    config: {
                      color: processColor("#000000"),
                      drawFilled: true,
                      fillColor: processColor("#CADFB8"),
                      fillAlpha: 100,
                      lineWidth: 0,
                      drawValues: false
                    }
                  },
                  {
                    values: [
                      { value: 0.25 },
                      { value: 0.25 },
                      { value: 0.25 },
                      { value: 0.25 },
                      { value: 0.25 },
                      { value: 0.25 },
                      { value: 0.25 }
                    ],
                    label: "Too Low",
                    config: {
                      color: processColor("#000000"),
                      drawFilled: true,
                      fillColor: processColor("#D9C5C5"),
                      fillAlpha: 100,
                      lineWidth: 0,
                      drawValues: false
                    }
                  },
                  {
                    values: [
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 },
                      { value: 0.5 }
                    ],
                    label: "DS 1",
                    config: {
                      color: processColor("#0022F5"),
                      lineWidth: 2,
                      drawValues: false,
                      drawCircles: true,
                      circleColor: processColor("#0022F5"),
                      drawCircleHole: false,
                    },
    
                  }
                ]
              }
            },
            xAxis: {
              $set: {
                valueFormatter: ["PRV", "HR", "RR", "O2", "E.A.", "ASI", "PAI"],
              }
            },
            yAxis: {
              $set: {
                axisMinimum: 0,
                axisMaximum: 1,
                enabled: false,
              }
            }
          }
    

    组件

     <RadarChart
                style={styles.chart}
                data={this.state.data}
                xAxis={this.state.xAxis}
                yAxis={this.state.yAxis}
                chartDescription={{ text: "" }}
                legend={this.state.legend}
                drawWeb={true}
                webLineWidth={1}
                webLineWidthInner={2}
                webAlpha={255}
                webColor={processColor("black")}
                webColorInner={processColor("black")}
                skipWebLineCount={0}
                onSelect={this.handleSelect.bind(this)}
                onChange={event => console.log(event.nativeEvent)}
                rotationAngle={-115}
              />
    

    【讨论】:

    • 我想去掉绿色的“内网”线。我查看了 java 代码,没有 webAlphaInner 使它透明。我创造了它。不管怎样,你的成就值得他赏金。
    • 谢谢。我确实在回购中看到了你的拉取请求。保持良好的工作。如果您想摆脱“绿色”,为什么不将线宽设为 0 或使用 processColor("transparent")。
    猜你喜欢
    • 2021-09-28
    • 2020-07-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-24
    • 1970-01-01
    • 2014-01-13
    相关资源
    最近更新 更多