【问题标题】：how to set title in legend of chart.js?如何在chart.js的图例中设置标题？
【发布时间】：2016-07-30 02:20:58
【问题描述】：

我正在使用带有chart.js 的角度图表，并且想在鼠标悬停在线时应用标题标题。我想在使用鼠标时将标题放在标题中。我可以使用标签来执行此操作，但出现在图形名称下方并且我不想要它，如何从图表中删除名称并仅保留图例的标题？

 $scope.labels = ["January", "February", "March", "April", "May",    "June", "July"];
   $scope.series = ['Series A', 'Series B'];
    $scope.data = [
  [65, 59, 80, 81, 56, 55, 40],
   [28, 48, 40, 19, 86, 27, 90]
 ];
 $scope.onClick = function (points, evt) {
console.log(points, evt);
 };
 });

我想删除图表下方的这些文本，只保留图例上的标题。见图片。有可能吗？

参考：http://jtblin.github.io/angular-chart.js/

JsFidle：http://jsfiddle.net/Lfmhcab3/4/

【问题讨论】：

需要更多代码来帮助。
我放的参考链接只有这段代码。你看到了吗？
是的，我做到了。网站上还有更多类型的图表....
查看stackoverflow.com/a/32864384/360067。只需将 Line 更改为 Bar 并将 bar 更改为点。我可以发布答案，但不确定您使用的是哪个角度库（tc-angular 或 angular-chart）
@potatopeelings 你可以编辑它 jsFidle 吗？ jsfiddle.net/Lfmhcab3/4

标签： javascript chart.js angular-chart

【解决方案1】：

预览

只需在您的 chart.js 包含后添加以下脚本。内联解释。

var originalLineInitialize = Chart.types.Line.prototype.initialize;
Chart.types.Line.prototype.initialize = function(data) {
    // we don't want the labels to separate the x axis from the bottom edge of the graph
    var originalLabels = data.labels;
    data.labels = data.labels.map(function() { return '' });

    originalLineInitialize.apply(this, arguments);

    // restore the original labels - because tooltips pick it up from these properties
    var xLabels = this.scale.xLabels;
    for (var i = 0; i < xLabels.length; i++)
        xLabels[i] = originalLabels[i];
    this.datasets.forEach(function(dataset) {
      dataset.points.forEach(function(point, i) {
        point.label = originalLabels[i];
      });
    });

    // override the scale drawing to set the labels to null before drawing 
    // and back to their original values after the scale is drawn
    var originalScaleDraw = this.scale.draw;
    this.scale.draw = function() {
      // we construct the originalLabels instead of using the previous one
      // this allows us to take care of any label updates (eg. in the angular directive)
      for (var i = 0; i < this.xLabels.length; i++) {
        originalLabels[i] = this.xLabels[i];
        this.xLabels[i] = '';
      }
        originalScaleDraw.apply(this, arguments);
      for (var i = 0; i < this.xLabels.length; i++)
        this.xLabels[i] = originalLabels[i];
    }
}

更新小提琴 - http://jsfiddle.net/pdodg04L/

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您希望在 JSFiddle 中保留相同的工具提示，您只想隐藏图表底部的标签。可悲的是，它不会是微不足道的，因为底部显示的标签与您在 Tooltip 中看到的标签相关联。

到remove the labels in chart.js，可以$scope.labels = ["", "", "", "", "", "", ""];，但是会导致tooltip中的title丢失。

作为一种解决方法，您有 2 个解决方案：

#1：快速但肮脏

按照@MichaelG 在his answer 中的建议，修改Chart.js 的源代码以隐藏图表底部的标签。只需几行代码，但您将丢失所有导入此 Chart.js 文件的图表的标签，并且将来升级您的 Chart.js 版本会很麻烦。

#2：更好但更难

正如@potatopeelings 的this answer 中所述，您可以覆盖显示工具提示的函数。所以你可以保留$scope.labels = ["", "", "", "", "", "", ""];这个东西来隐藏图表底部的标签，然后重写工具提示函数来显示你想要的标题，如下所示：

$scope.options = {
   // ...
   customTooltips: function(tooltip) {
       // My code to display 'January' / 'February' as a title according to the tooltip param
   }
}

PS：如果您尝试使用 customTooltips 选项，请考虑将您的 Chart.js 版本升级到最新版本，因为您的 JSFiddle 中的旧版本不支持它。

【讨论】：

【解决方案3】：

创建一个 id 名为 legend 的 div

<div id="legend"></div>

添加以下代码。在这里，数据是您为绘制图表而发送的数据。

legend(document.getElementById('legend'), data);

function legend(parent, data) {
    parent.className = 'legend';
    var datas = data.hasOwnProperty('datasets') ? data.datasets : data;

    // remove possible children of the parent
    while(parent.hasChildNodes()) {
        parent.removeChild(parent.lastChild);
    }

    datas.forEach(function(d) {
        var title = document.createElement('span');
        title.className = 'title';
        parent.appendChild(title);

        var colorSample = document.createElement('div');
        colorSample.className = 'color-sample';
        colorSample.style.backgroundColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
        colorSample.style.borderColor = d.hasOwnProperty('fillColor') ? d.fillColor : d.color;
        title.appendChild(colorSample);

        var text = document.createTextNode(d.label);
        title.appendChild(text);
    });
}

【讨论】：

你可以在 jsfidle 上发帖吗？

【解决方案4】：

这是我讨厌的答案。

只需为画布创建一个外部 div 并稍微降低其高度，以使标签不可见。还将overflow:hidden 设置为外部div。然后从内部 div 中分离图例并将其附加到外部 div。

这是一个有效的fiddle

HTML

<div class='chart-cont'>
<canvas tc-chartjs-line chart-options="options" chart-data="data" auto-legend ng-click="chartClick($event)" chart="chart"></canvas>

</div>

</div>

CSS

canvas{
  height:424px;
}
.chart-cont{
  height:410px;
  overflow:hidden;

}

和javascript

onAnimationComplete: function(){ $(".tc-chart-js-legend").detach().appendTo(".outer")},

【讨论】：