Question

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

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

我正在尝试截断显示在图表下方的标签，同时保留悬停在条形图上时显示在工具提示中的标签。问题是工具提示和画布标签都从数据结构中的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

在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 + ' €';
            }
        }
    },
}

Answer 2

所以我采用的方法是添加一个名为labelLength的新选项，如果传递的数字大于0，则会将x轴上的标签修剪为该长度。

它发生在图表的比例级别中，仅适用于轴标签，而不适用于工具提示。

如果您希望可以提取相关位，只需覆盖缩放类以及条形图中的构建比例功能以包含新选项。

在比例等级中，这是添加的内容

 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，例如下面

＆＃13;

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,
  });
}

＆＃13;

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

＆＃13;

Answer 3

只是一些额外的信息（无法评论，但认为这会有所帮助）我在上面的答案中添加了一小段代码以获得＆＃34; ...＆＃34;显示标签是否被截断。

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 4

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

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

4 个答案: