ChartJS：將值賦給甜甜圈之前掛鉤（圖表中的絕對值和工具提示中的實際值）

Question

由於ChartJS甜甜圈以奇怪的方式呈現負值（或者不是我需要的方式），所以我想要保留我的價值觀，因爲它們在工具提示中，但爲甜甜圈本身設定絕對值。

有一個回調修改創建之前的工具提示（http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration），但我沒有找到一個與實際值相同。

我是否錯過了某些東西，或者我需要以某種方式進行破解？

Answer 1

這裏是你如何能做到這...

♦從原始數據創建一個臨時數據陣列與絕對值和創建圖表

♦使用時，使用該數據陣列以下爲回調函數工具提示

callbacks: { 
    label: function(t, d) { 
     return d.labels[t.index] + ': ' + data[t.index]; 
    } 
} 

---

var ctx = document.getElementById("chart").getContext("2d"); 
 

 
// original data array 
 
var data = [1, -2, 3, -4]; 
 

 
// temporary data array \w absolute values 
 
var temp_data = data.map(function(e) { 
 
    return Math.abs(e); 
 
}); 
 

 
var myDoughnut = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ["January", "February", "March", "April"], 
 
     datasets: [{ 
 
      data: temp_data, 
 
      backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0'], 
 
     }] 
 
    }, 
 
    showDatapoints: true, 
 
    options: { 
 
     responsive: false, 
 
     legend: false, 
 
     tooltips: { 
 
      displayColors: false, 
 
      callbacks: { 
 
       label: function(t, d) { 
 
        return d.labels[t.index] + ': ' + data[t.index]; // 'data' represents the original data array 
 
       } 
 
      } 
 
     } 
 
    } 
 
});

body{margin-top:0;overflow:hidden}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" width="218"></canvas>