4

我正在将 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/

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

4

4 回答 4

5

预习

在此处输入图像描述

只需在您的 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/

于 2016-04-11T20:31:13.760 回答
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 中的旧版本不支持它。

于 2016-04-11T16:47:39.720 回答
1

这是我讨厌的答案。

只需为画布创建一个外部 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")},
于 2016-04-13T18:59:51.623 回答
1

创建一个 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);
    });
}
于 2016-04-10T18:32:31.820 回答