Javascript 为chart.js中的水平条添加值

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

我一直在寻找一种方法,使用chart.js在水平条形图的每个条形图中添加值,但所有的帖子似乎都展示了如何添加标签。工具提示同时显示标签和值,但我想显示值,以便用户无需将鼠标悬停在工具栏上即可看到结果

我在脚本中放置断点,以查看是否有“model”的任何属性包含该值,但找不到该值

这就是我如何设置图表,包括显示标签而不是值的动画部分

数据集来自ajax调用,图表显示在onSuccess中:

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!我现在醒了。我这里还有一个问题;我想知道你是否也能帮忙: