Question

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

我正在使用＆＃34;＆＃34;替换我的数组中的每一秒值，但是虽然这会消除x轴上的拥挤，但它不符合我在工具提示中显示标签的要求。

Answer 1

只需扩展折线图并替换初始化后不需要的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);

小提琴 - http://jsfiddle.net/ttz5t3dx/

Answer 2

为了扩展potatopeelings的答案，我们可以做到：

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

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

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

小提琴：https://jsfiddle.net/p63z7zys/1/

Answer 4

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

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

格式化标签

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

要格式化工具提示标题，我将使用工具提示的回调选项：

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

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

enter image description here

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

希望这有帮助。

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

4 个答案: