Javascript 使用chart.js 2.0.2在Pareto图表中显示值
我有一个帕累托图(使用chart.js版本:2.0.2),我需要在条内和线下显示值 非常感谢您的帮助: 这是代码(希望对某人有用):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' },{ 输入:“酒吧”, 标签:“亚洲”
风险值数据={
标签:[“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;
}
});
}
}
...
};