＃1：快速但很脏

Question

我正在使用带有chart.js的angular -chart，并希望应用标题标题当鼠标悬停在该行上时。我想把标题放在标题中当鼠标。我可以使用标签来做到这一点，但是出现在图形名称下方，我不想要它，如何删除图表中的名称并只保留图例的标题？ / p>

 $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中相同的工具提示，您只想隐藏图表底部的标签。可悲的是，它不会是微不足道的，因为底部显示的标签与您在工具提示中看到的标签相关联。

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

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

＃1：快速但很脏

修改Chart.js的源代码，以隐藏@MichaelG在his answer中建议的图表底部的标签。只有几行代码，但是你会丢失导入这个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中的旧版本不支持它。

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。

这是一个有效的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")},

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

4 个答案:

＃1：快速但很脏

＃2：更好但更难