RadarChart вопросы - PullRequest
       14

RadarChart вопросы

2 голосов
/ 07 октября 2019

Я изменил образец RadarChart .

  • Я хотел бы нарисовать полные круги на значениях набора данных, на синей линии на скриншоте ниже.
  • Я хотел бы нарисовать линии сетки только по оси x и установить ее цвет черным (теперь красным), избавиться от значений шкалы на оси y и установить цвет линии черным.

enter image description here

Состояние следующее:

{
        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.

Любая помощь приветствуется.


РЕДАКТИРОВАТЬ 10/ 17/2019

Короче говоря, я создал свойство webAlphaInner для RadarChart, которое позволяет мне сделать линии "внутренней сети" прозрачными. Нет круга на синей линии.

1 Ответ

0 голосов
/ 17 октября 2019
  1. Рисование круга - я не могу найти диаграммы радара с поддержкой drawCircle.
  2. Для второго запроса

    • Изменение красного на черный- Этот красный - webColor. webColor={processColor("black")}

    • Избавиться от накипи - В наборе Yaxis enabled: false,

    • Установить цвет линии на черный - В этом я предполагаю, что выимею ввиду зеленую цветную линию. webColorInner={processColor("black")} New Modified

Вот полный фрагмент кодагосударственный

{
        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}
          />
...