减少 Highcharts 条形图中条形的长度

Question

在 react-native 项目中，我使用 npm 包 "react-native-highcharts" 来绘制条形图。我在栏和 yaxis 标签之间添加填充时遇到问题。

为了绘制图表，我使用的代码如下： https://jsfiddle.net/y2uh60tc/

<View style={styles.cardView}>
     <View style={styles.headerView}>
          <Text style={styles.cardTitle}>Competition</Text>
     </View>
     <ChartView style={{ height: 300, marginTop: 5, overflow: 'hidden' }} config={conf} originWhitelist={['']} />
</View>

在移动设备中，如果我尝试在 +/- 值中提供填充，它也不起作用。

谁能帮我解决这个问题。

Answer 1

您需要在绘图区域中创建更多space，例如通过设置maxPadding 选项。要移动标签，请使用 stackLabels.x 属性:

yAxis: {
    ...
    maxPadding: 0.2,
    stackLabels: {
        ...,
        x: 30
    }
}

现场演示： https://jsfiddle.net/BlackLabel/jx02uw9p/

API参考：https://api.highcharts.com/highcharts/yAxis.stackLabels.x

减少 Highcharts 条形图中条形的长度

Reduce length of the bar in Bar chart in Highcharts

react-native

highcharts

react-highcharts