对于chartjs折线图,在工具提示中显示标签但不在x轴中显示 [英] show label in tooltip but not in x axis for chartjs line chart
问题描述
我目前正在使用带有 chart.js 的折线图,并且有一个看起来像这样的标签集 ["January 2015", "February 2015", "March 2015", "April 2015", "May2015"、2015 年 6 月"]
.我希望相关标签显示在图表的工具提示中,但只希望每个交替标签显示在图表的 x 轴上以防止拥挤.有什么办法可以做到这一点吗?
我目前正在用"替换数组中的每个第二个值,但是虽然这消除了我的 x 轴的拥挤,但它不符合我在工具提示中显示标签的要求.
只需扩展折线图并替换初始化后不需要的 xLabels
Chart.types.Line.extend({name: "LineAlt",初始化:函数(数据){Chart.types.Line.prototype.initialize.apply(this, arguments);var xLabels = this.scale.xLabelsxLabels.forEach(function (label, i) {如果(我 % 2 == 1)xLabels[i] = '';})}});var lineChartData = {标签:[一月"、二月"、三月"、四月"、五月"、六月"、七月"、八月"、九月"、十月"、十一月"、十二月"],数据集:[{填充颜色:#79D1CF",strokeColor: "#79D1CF",数据:[59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]}]};var ctx = document.getElementById("myChart").getContext("2d");var myLine = new Chart(ctx).LineAlt(lineChartData);
<小时>
小提琴 -
I currently am using a line chart with chart.js, and have a label set that looks like this ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]
. I want the relevant label to show up in the tooltip for the chart, but only want every alternating label to show up on the x axis of the chart to prevent crowding. Is there a way I can achieve this ?
I am currently replacing every second value from my array with "", but while that removes the crowding from my x axis, it does not meet my requirement to show the label in the tooltip.
Just extend the line chart and replace the xLabels you don't want after your initialization
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var xLabels = this.scale.xLabels
xLabels.forEach(function (label, i) {
if (i % 2 == 1)
xLabels[i] = '';
})
}
});
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLine = new Chart(ctx).LineAlt(lineChartData);
Fiddle - http://jsfiddle.net/ttz5t3dx/
这篇关于对于chartjs折线图,在工具提示中显示标签但不在x轴中显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!