使用chart.js在条形图的左、右标签(类别类型)？
使用chart.js在条形图的左、右标签(类别类型)？
提问于 2018-03-09 05:17:52
有没有一种方法可以在水平条形图的左右两边放置标签？
标签是“类别”类型，数据基本上是衡量两个类别之间的位置(例如，内向-外向)，所以1分更接近左边的“内向”，而得分更接近右边的“外向”。
附上我现在的照片--标签只在左边，所以我必须间接地显示左/右，把“内向的<->外向的”而不是把它们放在相反的一边。
我想做什么是可能的吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-09 08:29:11
我建议使用两个yAxes，一个在左边，另一个在右边，用来显示"min/max“类别标签。
此外，数据标签插件还在水平条上提供标签：
var chartData = {
labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
datasets: [{
label: 'value',
backgroundColor: 'rgba(219, 20, 0, 0.2)',
borderColor: 'rgba(219, 20, 0, 0.8)',
data: [60, 80, 55, 40],
yAxisID: 'y0'
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: {
legend: { display: false },
scales: {
yAxes: [{
id: "y0",
weight: 1,
position: "left",
type: 'category',
display: false,
gridLines: {
display: false
},
ticks: {
display: false,
padding: 0
}
},{
id: "y1",
weight: 0,
position: "left",
type: 'category',
labels: ['Intro', 'Low', 'Rec', 'Accom'],
gridLines: {
display: false
}
},{
id: "y2",
position: "right",
type: 'category',
labels: ['Extra', 'High', 'Tough', 'Indipend'],
gridLines: {
display: false
}
}],
xAxes: [{
id: "x1",
ticks: {
beginAtZero: true
}
}],
},
plugins: {
datalabels: {
color: 'red',
align: 'right',
anchor: 'start',
formatter: function(value, context) {
console.log(context)
return chartData.labels[context.dataIndex];
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>
更新：
作为替代，您可以绘制自己的标签onComplete (不需要额外的插件)。下面是一个例子：
var chartData = {
labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
datasets: [{
label: 'value',
backgroundColor: 'rgba(219, 20, 0, 0.2)',
borderColor: 'rgba(219, 20, 0, 0.8)',
data: [60, 80, 55, 40],
yAxisID: 'y0'
}]
};
var y1Labels = ['Intro', 'Low', 'Rec', 'Accom'];
var y2Labels = ['Extra', 'High', 'Tough', 'Indipend'];
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: {
legend: {
display: false
},
layout: {
padding: {
left: 0,
right: 50,
top: 0,
bottom: 0
}
},
scales: {
yAxes: [{
id: "y0",
weight: 1,
position: "left",
type: 'category',
display: true,
gridLines: {
display: false
},
ticks: {
display: true,
fontStyle: 'bold',
fontSize: 14
}
}, {
id: "y1",
position: "right",
type: 'category',
labels: ['Extra', 'High', 'Tough', 'Indipend'],
ticks: {
display: false,
padding: 30
},
gridLines: {
display: false
}
}],
xAxes: [{
id: "x1",
ticks: {
beginAtZero: true
}
}],
},
animation: {
duration: 0,
onComplete: function() {
var chartInstance = this.chart;
ctx.font = Chart.helpers.fontString(12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = 'red';
ctx.textBaseline="bottom";
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
console.log(chartInstance, meta);
var x0 = chartInstance.scales.y0.right;
var x1 = chartInstance.scales.y1.left;
meta.data.forEach(function(bar, index) {
var label = y1Labels[index];
var xOffset = x0 - 10 - ctx.measureText(label).width;
var yOffset = bar._model.y - 15;
ctx.fillText(label, xOffset, yOffset);
var label = y2Labels[index];
var xOffset = x1 + 10;
var yOffset = bar._model.y - 15;
ctx.fillText(label, xOffset, yOffset);
});
});
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49187040
复制相关文章
相似问题
腾讯云开发者
