如何在每个栏的顶部显示值 |高图 | Vue-chartkick |立方体答案

我正在使用 Vue chartkick 和 highcharts 来可视化柱形图。我想在每个列栏的顶部显示值。帮我完成它。

https://imgur.com/ehIQJAd

以上链接是我的输出图片。

<template>
    <column-chart lable="value" :min="0" :refresh="60" height="400px" 
     xtitle="City" :data="series" :library="values"></column-chart>
<template>

下面的代码是我的脚本。我正在使用 Vue.js

<script>
   data(){
        return{
            values: {
                borderWidth: 10,
                dataLabels: {
                    enabled: true
                }
            }
        }
    },
</script>

我的期望如下

https://imgur.com/cGIi6Ul

【问题讨论】：

您使用了highcharts 标签，但此问题与它并不严格相关。 Highcharts API：api.highcharts.com/highcharts/series.column.dataLabels
是的，我知道。但是如何作为数据标签传递。

标签： javascript vue.js highcharts vue-chartjs cube.js

【解决方案1】：

尝试添加

label="值"

到您的柱形图，

即

<column-chart :min="0" :refresh="60" height="400px" xtitle="City" 
:data="series" label="Value"></column-chart>

【讨论】：

尝试将“Value”替换为您要显示为标签的数据中的属性名称
现在我对代码进行了一些更改。请调查一下。

【解决方案2】：

我在这里工作：https://codepen.io/torkelv/pen/abbvLWy

这基本上是一种 hack，但不幸的是，没有简单的方法可以做到这一点。

通过使用插件服务：

Chart.pluginService.register({
    beforeRender: function(chart) {
        if (chart.config.options.showAllTooltips) {
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function(dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function(sector, j) {
                    chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options.tooltips,
                        _active: [sector]
                    }, chart));
                });
            }); // turn off normal tooltips 
            chart.options.tooltips.enabled = false;
        }
    },
    afterDraw: function(chart, easing) {
        if (chart.config.options.showAllTooltips) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
            if (!chart.allTooltipsOnce) {
                if (easing !== 1) return;
                chart.allTooltipsOnce = true;
            }
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
                tooltip.initialize();
                tooltip.update(); // we don't actually need this since we are not animating tooltips 
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
        }
    }

然后将options: { showAllTooltips: true, } 添加到图表中。

来源：https://github.com/chartjs/Chart.js/issues/1861

【讨论】：

请再次查看我的问题。我对此做了一些更改。