在 ChartJS 中截断 canvas 标签，同时在工具提示中保留完整的标签值

Question

我有一些带有很长标签的条形图，它们会影响图表的大小。

示例：http://jsfiddle.net/norbiu/aqa8w19d/4/

我试图截断显示在图表下方的标签，同时保留将鼠标悬停在栏上时显示在工具提示中的标签。问题是工具提示和 canvas 标签都从数据结构中的 labels 数组中获取它们的值。截断该值将在两个位置显示缩短的版本。

sales: ko.observable({
    labels: ['A really really long label', 'Another long labe', 'A third label that is long', 'Q4', 'Q5', 'Q6'],
    datasets: [{
        label: 'Helados',
        fillColor: '#152491',
        data: [70, 32, 6, 23, 63, 43]
    }]
}),

文档对此没有任何说明。有什么想法吗？

Answer 1

所以我解决这个问题的方法是添加一个名为 labelLength 的新选项，如果传递的数字大于 0，则会 trim x 轴上的标签达到该长度。

它发生在图表的比例 class 中，并且只会应用于轴标签而不是工具提示。

如果您愿意，可以提取相关位并覆盖比例 class 以及条形图中的构建比例函数以包含新选项。

在规模 class 中，这是添加的内容

 Chart.Scale = Chart.Element.extend({
        initialize: function() {
            //truncate the labels if option is grater than 0
            this.xLabels = this.labelLength > 0 ? this.xLabels.map(this.truncateLabel, this) : this.xLabels;
            this.fit();
        },
        truncateLabel: function(label) {
            return label.substring(0, this.labelLength);
        },

        addXLabel: function(label) {
            //also added here for when adding single items of data to a graph
            this.xLabels.push(this.labelLength > 0 ? this.truncateLabel(label) : label);
            this.valuesCount++;
            this.fit();
        },

}

然后在栏 buildscale 函数中，您需要将选项传递给秤。

或者我已经将其包含在我的图表 js (https://github.com/leighquince/Chart.js) 的分支中，只需将选项 labelLength 与您想要的标签长度一起传递，示例如下

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100)
};

var barChartData = {
  labels: ["January a really long label", "February a really long label", "March a really long label", "April a really long label", "May a really long label", "June a really long label", "July a really long label"],
  datasets: [{
    fillColor: "rgba(220,220,220,0.5)",
    strokeColor: "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  }, {
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  }, {
    fillColor: "rgba(15,18,20,0.5)",
    strokeColor: "rgba(15,18,20,0.8)",
    highlightFill: "rgba(15,18,20,0.75)",
    highlightStroke: "rgba(15,18,20,1)",
    data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  }]

}
window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
    labelLength: 10,
  });
}

<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<div style="width: 50%">
  <canvas id="canvas" height="450" width="600"></canvas>
</div>

Answer 2

只是一些附加信息（无法发表评论，但认为这会有所帮助）我在上面的答案中添加了一小段代码以获取“...”以显示标签是否被截断。

truncateLabel: function(label) {
    var xSubstring = label.substring(0, this.labelLength);
    if(xSubstring.length < this.labelLength) {
        return xSubstring;  
    } else {
        // Check if a word is cut off
        if ( ' ' != label.charAt( (this.labelLength-1) ) && ' ' != label.charAt( this.labelLength ) ) {
            // If so, cut the label off at the last space instead of mid-word
            var last_space_pos = label.lastIndexOf(" ", this.labelLength);
            last_space_pos = (0 > last_space_pos)? this.labelLength: last_space_pos;
            xSubstring = label.substring(0, last_space_pos);
        }
        return xSubstring+"...";
    }
},

Answer 3

这可以在不修改插件代码的情况下实现，customTooltips:function(tooltip) 选项记录在 here。
还提供了示例代码 here 来修改折线图的工具提示。使用该代码段很容易实现所需的行为。
- 为自定义工具提示创建 div。
- 截断 x 轴的标签，但将原始文本的映射保留在数组中。
- 在 customTooltip 函数中，通过使用 tooltip.text 作为映射数组中的键，用原始文本填充工具提示 div。

Answer 4

在 Chart JS V2 中，您可以截断传递选项对象的标签。您还可以自定义工具提示。

options:{
    scales: {
        xAxes: [{
            ticks: {
                callback: function(value) {
                    return value.substr(0, 10);//truncate
                },
            }
        }],
        yAxes: [{}]
    },
    tooltips: {
        enabled: true,
        mode: 'label',
        callbacks: {
            title: function(tooltipItems, data) {
                var idx = tooltipItems[0].index;
                return 'Title:' + data.labels[idx];//do something with title
            },
            label: function(tooltipItems, data) {
                //var idx = tooltipItems.index;
                //return data.labels[idx] + ' €';
                return tooltipItems.xLabel + ' €';
            }
        }
    },
}

在 ChartJS 中截断 canvas 标签，同时在工具提示中保留完整的标签值

Truncating canvas labels in ChartJS while keeping the full label value in the tooltips

javascript

chart.js