文本里面吧 - chart.js之

我需要使用chart.js之文本里面吧 - chart.js之

var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data:data, 
      options: { 

       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      }, 
      responsive : true, 
      showTooltips : false, 
      showInlineValues : true, 
      centeredInllineValues : true, 
      tooltipCaretSize : 0, 
      tooltipTemplate : "<%= value %>" 
     });

上面的代碼不工作，寫文成酒吧表...

我需要的是這樣的：

example

來源

2016-05-13 novato

你有一個 var ctx = document.getElementById("myChart");在你的代碼中定義。

UPDATE

這個代碼添加到你的選擇對象：

animation: { 
    onComplete: function() { 
    var chartInstance = this.chart; 
    var ctx = chartInstance.ctx; 
    console.log(chartInstance); 
    var height = chartInstance.controller.boxes[0].bottom; 
    ctx.textAlign = "center"; 
    Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { 
     var meta = chartInstance.controller.getDatasetMeta(i); 
     Chart.helpers.each(meta.data.forEach(function (bar, index) { 
     ctx.fillText(dataset.data[index], bar._model.x, height - ((height - bar._model.y)/2)); 
     }),this) 
    }),this); 
    } 
}

https://jsfiddle.net/h4p8f5xL/

UPDATE 2

環繞與容器畫布以所需的寬度和高度

<div style="width: 100%; height: 500px"> 
    <canvas id="myChart" width="400" height="400"></canvas> 
</div>

，並添加以下到您的選項對象

// Boolean - whether or not the chart should be responsive and resize when the browser does. 
responsive: true, 
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container 
maintainAspectRatio: false,

來源

2016-05-13 21:22:41 torresomar

是的...它的我的畫布標籤 – novato

你能告訴我們控制檯輸出？ – torresomar

控制檯輸出？你的意思是圖表？ – novato

如果你想使居中文本的每個元素，還有一個更簡單的方法：

Chart.helpers.each(meta.data.forEach(function (bar, index) { 
    var centerPoint = bar.getCenterPoint(); 
    ctx.fillText(dataset.data[index], centerPoint.x, centerPoint.y)); 
}),this)

似乎「getCenterPoint」在版本2.1.3（您在示例中使用）中不可用。我試了它與2.5.0和它的工作

來源

2017-03-31 10:26:05 eraser

文本里面吧 - chart.js之

回答

相關問題