时间戳

首页 > 解决方案 > 减少Highcharts条形图中条形的长度

react-native - 减少Highcharts条形图中条形的长度

问题描述

在 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>

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

有人可以帮我解决这个问题。

标签： react-nativehighchartsreact-highcharts

解决方案

您需要在绘图区域中腾出更多空间，例如通过设置maxPadding选项。要移动标签使用stackLabels.x属性：

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

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

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

推荐阅读