如何在每个列的顶部显示值| Hightcharts | Vue-chartkick | Cube Js

Question

我使用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

Answer 1

尝试添加

Label=“值”

到你的柱状图，

即

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

Answer 2

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

这基本上是一种黑客行为，但不幸的是，没有简单的方法来做到这一点。

通过使用pluginservice：

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