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

1 回答

• 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>
  

  回复于 2024-05-03T08:08:02+08:00