Javascript 为chart.js中的水平条添加值
我一直在寻找一种方法,使用chart.js在水平条形图的每个条形图中添加值,但所有的帖子似乎都展示了如何添加标签。工具提示同时显示标签和值,但我想显示值,以便用户无需将鼠标悬停在工具栏上即可看到结果 我在脚本中放置断点,以查看是否有“model”的任何属性包含该值,但找不到该值 这就是我如何设置图表,包括显示标签而不是值的动画部分 数据集来自ajax调用,图表显示在onSuccess中:Javascript 为chart.js中的水平条添加值,javascript,jquery,asp.net,chart.js,Javascript,Jquery,Asp.net,Chart.js,我一直在寻找一种方法,使用chart.js在水平条形图的每个条形图中添加值,但所有的帖子似乎都展示了如何添加标签。工具提示同时显示标签和值,但我想显示值,以便用户无需将鼠标悬停在工具栏上即可看到结果 我在脚本中放置断点,以查看是否有“model”的任何属性包含该值,但找不到该值 这就是我如何设置图表,包括显示标签而不是值的动画部分 数据集来自ajax调用,图表显示在onSuccess中: function OnSuccess_(response) { var jResult = JSON
function OnSuccess_(response) {
var jResult = JSON.parse(response.d);
var chartLabels = [];
var chartData = []
$.each(jResult, function (index, val) {
chartLabels.push(val.TIMERANGE);
chartData.push(val.COUNT); // <--- This is what I want to display on each bar
});
var ctx = document.getElementById("rtChart").getContext("2d");
if (chartRespTime)
chartRespTime.destroy();
chartRespTime = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: chartLabels,
datasets: [{
label: "Response Time (ms)",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: chartData
}]
},
options: {
title: {
display: true,
text: 'Database Response Time (milli-seconds)'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Response Time (ms)'
}
}]
},
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
ctx.fillStyle = '#444'; // label color
var label = model.label; // <--- need value not label
ctx.fillText(label, left + 15, model.y + 8);
}
});
}
},
maintainAspectRatio: false,
responsive: true,
showInlineValues: true,
centeredInllineValues: true,
tooltipCaretSize: 0
}
});
//console.log(ctx);
$('#rtChart').show();
}
成功时的函数(响应){
var jResult=JSON.parse(response.d);
var chartLabels=[];
var chartData=[]
$.each(jResult,函数(index,val){
chartLabels.push(val.TIMERANGE);
chartData.push(val.COUNT);//没有内置的方法可以做到这一点,但是有一个非常好的插件可以实现您想要的:datalabels插件谢谢。请将您的评论更改为answer,我会将其标记为answer。这非常有效。这是一个答案:)Doh!我现在醒了。我这里还有一个问题;我想知道你是否也能帮忙: