图表JS - 单行（点）工具提示

Question

如何进入ChartJS只返回图表上一个点的值（鼠标悬停），而不是整个数据集？

    <table>
<tr>
<td>
    <div style="width:30%">
        <div>
            <canvas id="canvas" height="600" width="1000"></canvas>

        </div>
    </div>
    </td>
    <td style="text-align:center;"><div id="placeholder" height="450" width="600"></div>

    <script>
    var lineChartData = {
        labels : [<?php echo $_SESSION['GRAFICO2']; ?>],
        datasets : [<?php echo $_SESSION[$_GET['vGrafico']]; ?>

        ]

    }


window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {bezierCurve: false, pointDot : true, datasetStroke : true, showTooltips: true, pointHitDetectionRadius : 2, offsetGridLines : true, TooltipTemplate: "<%= label %> - <%= data %>"});
    legend(document.getElementById('placeholder'), lineChartData);
}

</script>

喜欢这个 now - than

Answer 1

您可以通过覆盖图表的showTooltip和点的inRange方法来实现此目的。

预览

<强>脚本

...
var myChart = new Chart(ctx).Line(data);

// Chart.js replaces the base inRange function for Line points with a function that checks only the x coordinate
// we replace it with the original inRange fucntion (one that checks both x and y coordinates)
myChart.datasets.forEach(function(dataset){
  dataset.points.forEach(function(point){
    point.inRange = Chart.Point.prototype.inRange;
  });
});

// Chart.js shows a multiTooltip based on the index if it detects that there are more than one datasets
// we override it to show a single tooltip for the inRange element
myChart.showTooltip = function(ChartElements, forceRedraw) {
  // this clears out the existing canvas - the actual Chart.js library code is a bit more optimized with checks for whether active points have changed, etc.
  this.draw();
  // draw tooltip for active elements (if there is one)
  Chart.helpers.each(ChartElements, function(Element){
      var tooltipPosition = Element.tooltipPosition();
      new Chart.Tooltip({
        x: Math.round(tooltipPosition.x),
        y: Math.round(tooltipPosition.y),
        xPadding: this.options.tooltipXPadding,
        yPadding: this.options.tooltipYPadding,
        fillColor: this.options.tooltipFillColor,
        textColor: this.options.tooltipFontColor,
        fontFamily: this.options.tooltipFontFamily,
        fontStyle: this.options.tooltipFontStyle,
        fontSize: this.options.tooltipFontSize,
        caretHeight: this.options.tooltipCaretSize,
        cornerRadius: this.options.tooltipCornerRadius,
        text: Chart.helpers.template(this.options.tooltipTemplate, Element),
        chart: this.chart,
        custom: this.options.customTooltips
      }).draw();
    }, this);
}

明显的缺点是，如果有两个（或更多）点靠近在一起，您会看到可能重叠的多个工具提示。

小提琴 - http://jsfiddle.net/v7mtz64o/