Question

如何从react-native-wrapper中删除yAxis，并且我希望在yAxis上有自定义标签。因为react-native-wrapper的每个组件都没有适当的react-native文档。我希望折线图像甘特图一样工作。

constructor(props) {
        super(props);
         this.state = {
          data: {
            dataSets: [{
              values: [{ y: 130 }, { y: 130 }, { y: 130 }, { y: 130 }, { y: 130 }],
              label: 'Company Z',
              valueTextColor:processColor('cyan'),
             config: {
                lineWidth: 1,
                drawCubicIntensity: 0.4,
                circleRadius: 5,
                drawHighlightIndicators: false,
                color: processColor('blue'),
                drawFilled: true,
                fillColor: processColor('blue'),
                fillAlpha: 45,
                circleColor: processColor('blue'),
                textColor: processColor('cyan'),
              }
            }],
          },
          xAxis: {
            valueFormatter: ['4 Jul', '5 Jul', '6 Jul', '7 Jul','8 Jul','9 Jul','10 Jul','11 Jul','12 Jul','13 Jul'],
            textColor: processColor('red'),
          },
           yAxis: {
            textSize:30
          },
          legend: {
            enabled: true,
            textColor: processColor('blue'),
            textSize: 12,
            position: 'BELOW_CHART_RIGHT',
            form: 'SQUARE',
            formSize: 14,
            xEntrySpace: 10,
            yEntrySpace: 5,
            formToTextSpace: 5,
            wordWrapEnabled: true,
            maxSizePercent: 0.5,
            custom: {
              colors: [processColor('red')],
              labels: []
            }
          },
          marker: {
            enabled: true,
            backgroundTint: processColor('teal'),
            markerColor: processColor('#F0C0FF8C'),
            textColor: processColor('white'),
          }
        };

        // if you want to listen on navigator events, set this up
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
      }
  render(){
return(  
      <View style={styles.container}>
              <LineChart
                style={styles.chart}
                data={this.state.data}
                description={{ text: '1111111' }}
                legend={this.state.legend}
                marker={this.state.marker}

                xAxis={this.state.xAxis}
                drawGridBackground={true}
                borderColor={processColor('teal')}
                borderWidth={1}
                drawBorders={true}

                touchEnabled={true}
                dragEnabled={true}
                scaleEnabled={true}
                scaleXEnabled={true}
                scaleYEnabled={true}
                pinchZoom={true}
                doubleTapToZoomEnabled={true}

                dragDecelerationEnabled={true}
                dragDecelerationFrictionCoef={0.99}

                keepPositionOnRotation={false}
                onSelect={this.handleSelect.bind(this)}
              />

            </View>
)

Answer 1

yAxis道具

yAxis: PropTypes.shape({
  left: PropTypes.shape(yAxisIface),
  right: PropTypes.shape(yAxisIface)
}),

你可以像这样使用

yAxis: {
left:  {
  axisLineColor:   processColor(AXIS_LINE_COLOR),
  gridColor:       processColor(AXIS_LINE_COLOR),
  labelCount:      6,
  labelCountForce: true,
},
right: {
  enabled:       true,
  drawLabels:    false,
  drawAxisLine:  true,
  axisLineColor: processColor(AXIS_LINE_COLOR),
  drawGridLines: false,
}
}

如何从react-native-wrapper中的<linechart>中删除/自定义yAxis

1 个答案: