如何在chart.js的图例中设置标题？

Question

我正在使用angular -chart with 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/

Answer 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/

Answer 2

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

要删除chart.js中的标签 ，您可以执行$scope.labels = ["", "", "", "", "", "", ""]; 但它会导致工具提示中的标题丢失。

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

＃1：快但脏

修改Chart.js的源代码，以隐藏@MichaelG在其答案中建议的图表底部的标签。 只有几行代码，但是你会丢失导入这个Chart.js文件的所有图表的标签，将来升级你的Chart.js版本会很麻烦。

＃2：更好但更难

如@potatopeelings的回答中所述，您可以覆盖显示工具提示的功能。 所以你可以保留$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中的旧版本不支持它。

Answer 3

创建一个名为legend的id 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);
    });
}

Answer 4

这是我讨厌的答案。

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

这是一个工作小提琴

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