Question

我正在尝试将折线图的值添加到网格线的顶部，而不是点本身。

我设法使用以下代码在栏顶部添加了值：

    options: {
        "animation": {
            "duration": 1,
                        "onComplete": function () {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;

                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset, i) {
                                var meta = chartInstance.controller.getDatasetMeta(i);
                                meta.data.forEach(function (bar, index) {
                                    var data = dataset.data[index];                            
                                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                                });
                            });
                        }
        },
}

我要在红色网格线的末尾显示值，而不是在下面的笔中显示红色框：https://codepen.io/paufar/pen/VOpZGQ

是否可以更改值的位置？

Answer 1

您是说像this吗？

如果您将数据存储在图表本身之外，则可以从第二个x轴的ticks回调中访问它：

class DetailScreen extends React.Component {
  render() {
    const { screenProps } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Detail Screen</Text>
        <Text>{screenProps.appState.value}</Text> 
      </View>
    );
  }
}

是否可以在显示结束处显示值，而不是在chartjs点的顶部显示？

1 个答案: