Javascript Chart.js - 在水平条内写标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38645829/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js - Writing Labels Inside of Horizontal Bars?
提问by antonin_scalia
In Chart.js, is there any way to write the labels inside of the horizontal bars in a "horizontalBar"chart? As in something like:
在 Chart.js 中，有没有办法在"horizontalBar"图表的水平条内写标签？就像这样：
Is anything similar to this possible in Chart.js?
Chart.js 中是否有与此类似的功能？
Thanks!
谢谢！
回答by Elie
There is now on option "mirror" to make the label appear inside the bar.
现在有选项“镜像”可以使标签出现在栏内。
Example of "options" config for a horizontalBar chart :
水平条形图的“选项”配置示例：
options: {
scales: {
yAxes: [{ticks: {mirror: true}}]
}
}
Doc : http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
文档：http: //www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
回答by Hung Tran
With reference to the original solution to displaying data valueby using HTML5 Canvas fillText()method in the animation's onComplete, the code below will get you what you need:
参考's 中使用 HTML5 Canvas方法显示数据值的原始解决方案，下面的代码将满足您的需求：fillText()animationonComplete
The key to custom-displaying any chart related data is inspecting the chart's dataset as in this.data.datasetsbelow. I did this by inspecting where the different values are in this dataset, as well as the position to place them for the fillText method.
自定义显示任何图表相关数据的关键是检查图表的数据集，this.data.datasets如下所示。我通过检查不同值在此数据集中的位置以及为 fillText 方法放置它们的位置来做到这一点。
Inspecting the chart's dataset: Image
检查图表的数据集：图像
Script (Chart.js 2.0 & up):
脚本（Chart.js 2.0 及更高版本）：
var barOptions = {
events: false,
showTooltips: false,
legend: {
display: false
},
scales:{
yAxes: [{
display: false
}]
},
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;
ctx.fillText(label, left + 15, model.y + 8);
}
});
}
}
};
jsFiddle: http://jsfiddle.net/jfvy12h9/
jsFiddle：http: //jsfiddle.net/jfvy12h9/
回答by omnikron
You can achieve this effect in chartjs 2.0 + by rotating the labels 90 degrees and applying negative padding, so that the label moves up inside the 'bar'. Something like this:
您可以在 chartjs 2.0 + 中通过将标签旋转 90 度并应用负填充来实现此效果，以便标签在“条形”内向上移动。像这样的东西：
new Chart(document.getElementById(id), {
type: 'bar',
data: data,
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
});
See the tick configuration documentationfor more information.
有关更多信息，请参阅刻度配置文档。
回答by erikthered65
Since on "bar" chart doesn't work the "mirror" option...
由于在“条形”图表上“镜像”选项不起作用...
I've found a workaround solution: Fiddle link
我找到了一个解决方法： 小提琴链接
I used a chart.js 2.8.0 version modified in this link
我使用了在此链接中修改的 chart.js 2.8.0 版本
<html>
<body>
<canvas id="myChart" width="800" height="600">
</canvas>
</body>
</html>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
label: "Quota Eni mensile",
backgroundColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderWidth: 1,
data: [10, 11, 18, 10, 13, 28, 12, 16]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks:{
maxRotation: 90,
minRotation: 90,
display: "top"
},
}],
yAxes: [{
display: false
}]
},
tooltips: {
enabled: true
},
maintainAspectRatio: true,
responsive: true
}
});
});
Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
id: "responsiveXlabels",
beforeDraw: function(c) {
var chartHeight = c.chart.height;
var size = (chartHeight * 2.5) / 100;
var xAxis = c.scales["x-axis-0"];
xAxis.options.ticks.minor.fontSize = size;
xAxis.height = 10;
xAxis.minSize.height = 10;
c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
xAxis.margins.bottom = size * 12.5;
},
afterDraw: function(c) {
c.options.scales.xAxes[0].ticks.padding = -158;
}
});
});
the responsiveXlabel plugin is used to transform text on resize. There's only one thing remained to solve: align text at the bottom of the axis.
responseXlabel 插件用于在调整大小时转换文本。只剩下一件事需要解决：在轴的底部对齐文本。
Hope this helps who wants to implement mirroring on X Axis and satisfy responsive request.
希望这对想要在 X 轴上实现镜像并满足响应请求的人有所帮助。
回答by Kubilay Karpat
It seems like there is no direct option for this right now. A possible implementation is iterating over bars/columns by using onAnimationComplete hook. You can view this question for detailed explanations how to display data values on Chart.js
现在似乎没有直接的选择。一个可能的实现是通过使用 onAnimationComplete 钩子迭代条/列。您可以查看此问题以获取有关如何在 Chart.js 上显示数据值的详细说明
I would like you remind that this has a drawback. Since it uses onAnimationComplete, whenever an animation happens on chart, values will be disappear for a second and appear again.
我想提醒您，这有一个缺点。由于它使用 onAnimationComplete，每当图表上发生动画时，值将消失一秒钟并再次出现。
