2

我已经修改了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 属性,它允许我使“内网”线条透明。蓝线上没有圆圈。

4

1 回答 1

0
  1. 绘图圈 - 我找不到支持 drawCircle 的雷达图。
  2. 对于第二个查询

    • 将红色变为黑色 - 这种红色是 webColor。webColor={processColor("black")}

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

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

这是完整的代码片段
状态

{
        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}
          />
于 2019-10-17T07:52:13.847 回答