在工具提示中显示标签但不在 chartjs 折线图的 x 轴中显示标签

Question

我目前正在使用带有 chart.js 的折线图，并且有一个看起来像这样的标签集 ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]。我希望相关标签显示在图表的工具提示中，但只希望每个交替标签显示在图表的 x 轴上以防止拥挤。有什么办法可以实现吗？

我目前正在用“”替换我的数组中的每个第二个值，但是虽然这消除了我的 x 轴上的拥挤，但它不符合我在工具提示中显示标签的要求。

Answer 1

只需扩展折线图并在初始化后替换您不需要的 xLabels

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/

Answer 2

为了扩展 patotopeelings 的答案，我们可以这样做：

var xLabels = this.scale.xLabels
var modVal = Math.ceil( xLabels.length / 10)                    
xLabels.forEach(function (label, i)
{
    if (i % modVal != 0)
        xLabels[i] = '';
})

限制标签的数量（在本例中为 10 个），这样无论您有多少数据点，您的标签都不会拥挤。

Answer 3

对于任何希望在 Chart JS V2 上实现此目的的人来说，以下方法都可行：

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                var xLabels = data.ticks;

                xLabels.forEach(function (labels, i) {
                    if (i % 2 == 1){
                        xLabels[i] = '';
                    }
                });
            } 
        }]   
    }
}

然后像往常一样将选项变量传递给：

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

Answer 4

在图表选项的 xAxes 下，您可以将 maxTickLimit 属性指定为任何您喜欢的值：

xAxes: [{
        ticks: {
        autoSkip:true,
        maxTicksLimit:3
        }
     }]

Fiddle : https://jsfiddle.net/p63z7zys/1/

Answer 5

这是我在使用 ChartJs 时遇到的最棘手的事情之一。

我要分享我的解决方案：我刚刚使用了图表选项。首先，我将为我的 xAxe 定义一些属性。请注意，我正在使用回调:

格式化标签

scales: {
    xAxes: [{
       id: "x-", stacked: false, ticks: { 
       autoSkip: false, callback: (label) => { return label + "TEST" } }
       }
    ]}

为了格式化工具提示标题，我将使用 callbacks 选项作为 tooltips:

    tooltips: {
        callbacks: {
            title : (tooltipItems, data) => {
               var labelIndex = tooltipItems[0].index;
               var realLabel = data.labels[labelIndex];
               return realLabel + "TOOLTIP";
      }
    }
  }

使用这样的图表选项，我可以为 x-axis 标签和相应的工具提示标题显示不同的内容：

enter image description here

您可以找到完整的示例 here。

希望对您有所帮助。

在工具提示中显示标签但不在 chartjs 折线图的 x 轴中显示标签

show label in tooltip but not in x axis for chartjs line chart

javascript

charts

canvas

chart.js