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

Question

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

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

- War Lock

---

需要更多的代码来帮助。 - Mikes3ds

我只是把参考链接放在了这段代码里，你看到了吗？ - War Lock

是的，我做了。网站上有不止一种类型的图表.... - Mikes3ds

请查看https://dev59.com/gY_ea4cB1Zd3GeqPQZYe#32864384。只需将Line更改为Bar，bars更改为points即可。我可以发布一个答案，但不确定您正在使用哪个Angular库（tc-angular还是angular-chart）。 - potatopeelings

@potatopeelings 是 Angular 图表。 - War Lock

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/

- potatopeelings

Answer 2

如果我正确理解了你的问题，你想保留与JSFiddle中相同的工具提示，只是想隐藏图表底部的标签。不幸的是，这并不容易，因为显示在底部的标签与工具提示中可见的标签相关联。

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

作为解决办法，你有两个选择：

#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中的旧版本不支持它。

- bviale

Answer 3

这是我的不友好的回答。

只需为画布创建一个外部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")},

- Rohit Agre

Answer 4

创建一个id为“legend”的div。

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

请添加以下代码。这里的data是您发送以绘制图表的数据。

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

- Nikhil Baliga

---

你可以在JSFiddle上发布吗？ - War Lock