Javascript 使用chart.js 2.0.2在Pareto图表中显示值

Javascript 使用chart.js 2.0.2在Pareto图表中显示值,javascript,chart.js,pareto-chart,Javascript,Chart.js,Pareto Chart,我有一个帕累托图(使用chart.js版本:2.0.2),我需要在条内和线下显示值 非常感谢您的帮助: 这是代码(希望对某人有用): 风险值数据={ 标签:[“8”、“7”、“9”、“11”、“10”], 数据集:[{ 键入:“行”, 标签:“Acumulado”, 边框颜色:“BA1E14”, 背景色:“BA1E14”, 点边界宽度:5, 填充:假, 数据:[34.04,57.45,76.60,89.36100.00], yAxisID:'y轴-2' },{ 输入:“酒吧”, 标签:“亚洲”

我有一个帕累托图(使用chart.js版本:2.0.2),我需要在条内和线下显示值

非常感谢您的帮助:

这是代码(希望对某人有用):


风险值数据={
标签:[“8”、“7”、“9”、“11”、“10”],
数据集:[{
键入:“行”,
标签:“Acumulado”,
边框颜色:“BA1E14”,
背景色:“BA1E14”,
点边界宽度:5,
填充:假,
数据:[34.04,57.45,76.60,89.36100.00],
yAxisID:'y轴-2'
},{
输入:“酒吧”,
标签:“亚洲”,
边框颜色:“56B513”,
背景颜色:“56B513”,
数据:[16,11,9,6,5],
yAxisID:'y轴-1'
},{
输入:“酒吧”,
标签:“Solución”,
边框颜色:“000FAA”,
背景色:“000FAA”,
数据:[16,11,9,6,5],
yAxisID:'y轴-1'
}]
};
变量选项={
比例:{
xAxes:[{
对,,
scaleLabel:{
显示:对,
标签串:“Estaciones”
}
}],
雅克斯:[{
类型:“线性”,
位置:“左”,
id:“y轴-1”,
对,,
滴答声:{
建议分钟:0
},
scaleLabel:{
显示:对,
标签串:“分钟”
}
},{
类型:“线性”,
位置:“对”,
id:“y轴-2”,
滴答声:{
建议分钟:0,
回调:函数(值){
返回值+“%”;
}
},
scaleLabel:{
显示:对,
标签串:“瓷器”
}
}]
}
};
window.onload=函数(){
var ctx=document.getElementById(“画布”).getContext(“2d”);
window.myBar=新图表(ctx{
类型:'bar',
数据:数据,
选项:选项
});
};
现在,图表如下所示: 我需要它看起来像这样:

这是我得出的答案(仅在选项对象中):

这就是结果:


这是我得出的答案(仅在选项对象中):

这就是结果:

<canvas id="canvas"></canvas>

<script type="text/javascript">
    var data = {
        labels: ["8","7","9","11","10"],
        datasets: [{
            type: "line",
            label: "Acumulado",
            borderColor: "#BA1E14",
            backgroundColor: "#BA1E14",
            pointBorderWidth: 5,
            fill: false,
            data: [34.04,57.45,76.60,89.36,100.00],
            yAxisID: 'y-axis-2'
        },{
            type: "bar",
            label: "Asistencia",
            borderColor: "#56B513",
            backgroundColor: "#56B513",
            data: [16,11,9,6,5],
            yAxisID: 'y-axis-1'
        },{
            type: "bar",
            label: "Solución",
            borderColor: "#000FAA",
            backgroundColor: "#000FAA",
            data: [16,11,9,6,5],
            yAxisID: 'y-axis-1'
        }]
    };

    var options = {
        scales: {
            xAxes: [{
                stacked: true,
                scaleLabel: {
                    display: true,
                    labelString: "Estaciones"
                }
            }],

            yAxes: [{
                type: "linear",
                position: "left",
                id: "y-axis-1",
                stacked: true,
                ticks: {
                    suggestedMin: 0
                },
                scaleLabel: {
                    display: true,
                    labelString: "Minutos"
                }
            },{
                type: "linear",
                position: "right",
                id: "y-axis-2",
                ticks: {
                    suggestedMin: 0,
                    callback: function(value) {
                        return value + "%";
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: "Porcentaje"
                }
            }]
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");

        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: options
        });
    };
</script>
var options = {
    animation: {
        onComplete: function() {
            var ctx = this.chart.ctx;
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";

            this.chart.config.data.datasets.forEach(function(dataset) {
                ctx.font = "20px Arial";
                switch (dataset.type) {
                    case "line":
                        ctx.fillStyle = "Black";
                        dataset.metaData.forEach(function(p) {
                            ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 20);
                        });
                        break;
                    case "bar":
                        ctx.fillStyle = "White";
                        dataset.metaData.forEach(function(p) {
                            ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y  + 20);
                        });
                        break;
                }
            });
        }
    }
...
};