在工具提示中显示标签，但在chartjs折线图的x轴中不显示标签 [英] show label in tooltip but not in x axis for chartjs line chart

问题描述

我目前正在使用带有chart.js的折线图，并且有一个标签集，看起来像 [2015年1月，2015年2月，2015年3月，2015年4月 ，2015年5月，2015年6月] 。我希望相关标签显示在图表的工具提示中，但只希望每个交替的标签显示在图表的x轴上，以防止拥挤。是否有一种方法可以实现这个？

我目前用替换我的数组中的每个第二个值，但是虽然从x轴删除拥挤，

解决方案

只需扩展折线图，替换你所需要的xLabel，

  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 -

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屋！