Как показать значение в верхней части каждой колонки столбца |Hightcharts |Vue-чарткик |Cube Js - PullRequest
Новая
       33

Как показать значение в верхней части каждой колонки столбца |Hightcharts |Vue-чарткик |Cube Js

0 голосов
/ 10 октября 2019

Я использую 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

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

У меня это работает здесь: https://codepen.io/torkelv/pen/abbvLWy

Это в основном хак, но, к сожалению, нет простого способа сделать это.

С помощью службы плагинов: 

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

0 голосов
/ 10 октября 2019

Попробуйте добавить

label = "Value"

к вашему столбчатому графику,

т.е. 

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