Как показать значение в верхней части каждой строки столбца | Hightcharts | Vue-chartkick | Куб Js
Я использую Vue chartkick и highcharts для визуализации столбчатой диаграммы. Я хочу показать значение в верхней части каждой полосы столбца. Помогите мне завершить это.
Выше ссылка - изображение моего вывода.
<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>
Мое ожидание как ниже
2 ответа
Попробуйте добавить
label="Значение"
к вашей столбчатой диаграмме,
т.е.
<column-chart :min="0" :refresh="60" height="400px" xtitle="City"
:data="series" label="Value"></column-chart>
У меня он работает здесь: 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, } к графику.