ChartJS水平圖表顯示圖例

Question

我在ChartJS相當新，我具有水平條形圖：

HTML

<canvas id="mybarChart"></canvas> 

JavaScript的：

var ctx = document.getElementById("mybarChart"); 

    ctx.height = 300; 

    var mybarChart = new Chart(ctx, { 
     type: 'horizontalBar', 
     responsive: true, 
     data: data, 
     options: { 
      legend: { 
       display: false 
      }, 
      scales: { 
       yAxes: [{ 
        display: false, 
        ticks: { 
         beginAtZero: true 
        }, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        } 
       }], 
       xAxes: [{ 
        display: false, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        }, 
        barPercentage: 0.5, 
        categoryPercentage: 0.5 
       }] 
      } 
     } 
    }); 

爲我試圖在每個酒吧上添加圖例，例如，但現在看起來像

我試過加入

onAnimationComplete: function() { 

      var ctx = this.chart.ctx; 
      ctx.font = this.scale.font; 
      ctx.fillStyle = this.scale.textColor 
      ctx.textAlign = "center"; 
      ctx.textBaseline = "bottom"; 

      this.datasets.forEach(function (dataset) { 
       dataset.points.forEach(function (points) { 
        ctx.fillText(points.value, points.x, points.y - 10); 
       }); 
      }) 
     } 

但仍然是相同的結果。我究竟做錯了什麼？ 我發現了一些here，但每個欄上顯示的標籤都是Y軸的刻度。 是否可以在每個欄上添加圖例並保留工具提示？

在此先感謝！

Answer 1

實際上有幾種方法可以實現這一點。爲了簡單起見，我只會修改您提供的示例。

請記住，這會將標籤置於酒吧內。你可以很容易地修改它以將它放置在外面，但是你必須添加邏輯來確保你不會溢出到圖表的頂部或其他欄（不是非常簡單的邏輯）。

另外，這種方法要求您爲每個數據集配置標籤（無論如何都需要驅動常規圖例）。

只需將其放置在您的animation.onComplete屬性中即可。

function() { 
    var ctx = this.chart.ctx; 
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
    ctx.textAlign = 'left'; 
    ctx.textBaseline = 'bottom'; 

    this.data.datasets.forEach(function(dataset) { 
    for (var i = 0; i < dataset.data.length; i++) { 
     var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model, 
      scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight; 
     left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left; 
     offset = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.longestLabelWidth; 
     ctx.fillStyle = '#444'; 
     var y_pos = model.y - 5; 
     var label = model.label; 
     // Make sure data value does not get overflown and hidden 
     // when the bar's value is too close to max value of scale 
     // Note: The y value is reverse, it counts from top down 
     if ((scale_max - model.y)/scale_max >= 0.93) 
     y_pos = model.y + 20; 
     // ctx.fillText(dataset.data[i], model.x, y_pos); 

     if (dataset.data[i] > 0) { 
     ctx.fillText(dataset.label, left + 10, model.y + 8); 
     } 
    } 
    }); 
} 

這是jsfiddle example（從您提供的示例中分出）。