ChartJS：将值赋给甜甜圈之前挂钩（图表中的绝对值和工具提示中的实际值）

由于ChartJS甜甜圈以奇怪的方式呈现负值（或者不是我需要的方式），所以我想要保留我的价值观，因为它们在工具提示中，但为甜甜圈本身设定绝对值。ChartJS：将值赋给甜甜圈之前挂钩（图表中的绝对值和工具提示中的实际值）

有一个回调修改创建之前的工具提示（http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration），但我没有找到一个与实际值相同。

我是否错过了某些东西，或者我需要以某种方式进行破解？

2017-04-26 Korbraan

这里是你如何能做到这...

♦从原始数据创建一个临时数据阵列与绝对值和创建图表

♦使用时，使用该数据阵列以下为回调函数工具提示

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>

来源

2017-04-26 19:51:52

谢谢。我不明白为什么图书馆不提供回调，但你的解决方案就像一个魅力。 – Korbraan

不客气。 –

ChartJS：将值赋给甜甜圈之前挂钩（图表中的绝对值和工具提示中的实际值）

回答

相关问题