#vue.js #chart.js #nuxt.js #chartjs-2.6.0 #vue-chartjs
Вопрос:
Я использую приложение Nuxt с vue-диаграммами. У меня есть диаграмма, на которой я пытаюсь посмотреть, есть ли способ вернуть числа рядом с диаграммой. Что-то вроде этого
Теперь мои параметры на диаграмме выглядят так.
barLostDollarChartOptions: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
title: {
display: true,
text: 'Daily NP Opportunity Costs'
},
scales: {
yAxes: [{
//Sets the Max value after re-rendering chart
beforeFit: function (scale){
let maxValue = 0
if (scale.chart.config amp;amp; scale.chart.config.data amp;amp; scale.chart.config.data.datasets) {
scale.chart.config.data.datasets.forEach(dataset => {
if (dataset amp;amp; dataset.data) {
dataset.data.forEach(value => {
if (value > maxValue) {
maxValue = value
}
})
}
})
}
// After, set max option !!!
scale.options.ticks.max = maxValue
},
// afterFit: function (scale){
// console.log('yAxes',scale)
// let arr = Object.values(scale.chart.config.data.datasets[0].data);
// let min = Math.min(...arr);
// let max = Math.max(...arr);
// maxValueArray.push(max)
// // console.log( `Min value: ${min}, max value: ${max}` );
//
// }
}
],
xAxes: [{
ticks:{
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
// console.log(value.toString().replace(/B(?=(d{3}) (?!d))/g, ","))
return '
Но я пытаюсь понять, есть ли способ перезвонить по номеру и отобразить его рядом с баром? есть какие-нибудь идеи?
Ответ №1:
Для этого вы можете использовать плагин datalabels:
Chart.plugins.register(ChartDataLabels);
var options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
}]
},
options: {
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
formatter: (val) => ('
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.js"></script>
</body>
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте plugins раздел объекта параметров в свой собственный объект параметров
value.toString().replace(/B(?=(d{3}) (?!d))/g, ",");
} else {
return 'Но я пытаюсь понять, есть ли способ перезвонить по номеру и отобразить его рядом с баром? есть какие-нибудь идеи?
Ответ №1:
Для этого вы можете использовать плагин datalabels:
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте plugins раздел объекта параметров в свой собственный объект параметров
value;
}
},
},
}]
}
},
Но я пытаюсь понять, есть ли способ перезвонить по номеру и отобразить его рядом с баром? есть какие-нибудь идеи?
Ответ №1:
Для этого вы можете использовать плагин datalabels:
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте plugins раздел объекта параметров в свой собственный объект параметров
val)
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте
pluginsраздел объекта параметров в свой собственный объект параметров
value.toString().replace(/B(?=(d{3}) (?!d))/g, «,»);
} else {
return ‘
Но я пытаюсь понять, есть ли способ перезвонить по номеру и отобразить его рядом с баром? есть какие-нибудь идеи?
Ответ №1:
Для этого вы можете использовать плагин datalabels:
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте
pluginsраздел объекта параметров в свой собственный объект параметров
value;
}
},
},
}]
}
},
Но я пытаюсь понять, есть ли способ перезвонить по номеру и отобразить его рядом с баром? есть какие-нибудь идеи?
Ответ №1:
Для этого вы можете использовать плагин datalabels:
Комментарии:
1. Мы можем использовать это в сочетании с vue-диаграммами?
2. Да, ты можешь просто отлично
3. Должен ли я заменить текущую настройку подключаемым модулем или просто ввести ее? (Например, то, что у меня есть в примере)
4. Просто убедитесь, что у вас установлена версия 1 плагина datalabels, так как более поздние версии предназначены для chart.js v3, убедитесь, что вы зарегистрировали его, как я сделал в первой строке снипета, а затем скопируйте
pluginsраздел объекта параметров в свой собственный объект параметров