如何隐藏特定数据的标签？，chartjs 插件数据标签

Question

我使用嵌套圆环图制作了一个径向进度条，该对象工作正常。

我想在标签上显示进度，但标签在我用作背景的数据中变得可见。

q1:如何隐藏我只用作背景的标签？

q2:你觉得用chartjs做进度条好不好？（实时）如果您能提供有关另一个替代库的信息，我将非常高兴。

我的代码：

var _gaugeValue = 5;
var _gaugeValue2 = 43;
var _gagueMaxVal = 100;
var _gagueMaxVal2 = 150;
var ctxGauge = document.getElementById("myCanvasGauge");

var myGauge = new Chart(ctxGauge, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [_gaugeValue2, _gagueMaxVal2 - _gaugeValue2],
              backgroundColor: ["rgba(255,0,0,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "80%",
            },
            {
              data: [_gaugeValue, _gagueMaxVal - _gaugeValue],
              backgroundColor: ["rgba(71,148,218,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "70%",
              options: {
                plugins: {
                  datalabels: {
                    display: false,
                  },
                },
              },
            },
          ],
        },
        options: {
          response: true,
          maintainAspectRatio: false,
          plugins: {
            tooltip: {
              enabled: false,
            },
            datalabels: {
              backgroundColor: function (context) {
                return context.dataset.backgroundColor;
              },
              borderColor: "white",
              borderRadius: 25,
              borderWidth: 2,
              color: "white",
              display: function (context) {
                var dataset = context.dataset;
                var count = 2;
                var value = dataset.data[1];
                return value > count * 1.5;
              },
              font: {
                weight: "bold",
              },
              padding: 6,
              formatter: Math.round,
            },
          },
        },
        plugins: [ChartDataLabels],
      });
      
      
function changeData() {
        _gaugeValue = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[1].data = [
          _gaugeValue,
          _gagueMaxVal - _gaugeValue,
        ];
        myGauge.update();
      }

function changeData2() {
        _gaugeValue2 = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[0].data = [
          _gaugeValue2,
          _gagueMaxVal2 - _gaugeValue2,
        ];
        myGauge.update();
      }

.gauge-container {
  margin: auto;
}

.button-container {
  margin: auto;
  padding: 10px;
}

   <script
      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
      integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"
      integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>


<div class="gauge-container">
      <canvas id="myCanvasGauge"></canvas>
    </div>

    <div class="button-container">
      <button onclick="changeData()">Change Data 1</button>
    </div>
    <div class="button-container">
      <button onclick="changeData2()">Change Data 2</button>
    </div>

Answer 1

您可以使用 display 回调来确定显示哪些标签

如果我没看错的话，您不希望标签出现在图表的灰色部分...？

如果是这样，只显示第一个值...

          display: function (context) {
            return context.dataIndex === 0;
          },

请参阅以下工作片段...

var _gaugeValue = 5;
var _gaugeValue2 = 43;
var _gagueMaxVal = 100;
var _gagueMaxVal2 = 150;
var ctxGauge = document.getElementById("myCanvasGauge");

var myGauge = new Chart(ctxGauge, {
        type: "doughnut",
        data: {
          datasets: [
            {
              data: [_gaugeValue2, _gagueMaxVal2 - _gaugeValue2],
              backgroundColor: ["rgba(255,0,0,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "80%",
            },
            {
              data: [_gaugeValue, _gagueMaxVal - _gaugeValue],
              backgroundColor: ["rgba(71,148,218,1)", "rgba(220,220,220,1)"],
              hoverOffset: 4,
              cutout: "70%",
              options: {
                plugins: {
                  datalabels: {
                    display: false,
                  },
                },
              },
            },
          ],
        },
        options: {
          response: true,
          maintainAspectRatio: false,
          plugins: {
            tooltip: {
              enabled: false,
            },
            datalabels: {
              backgroundColor: function (context) {
                return context.dataset.backgroundColor;
              },
              borderColor: "white",
              borderRadius: 25,
              borderWidth: 2,
              color: "white",
              display: function (context) {
                return context.dataIndex === 0;
              },
              font: {
                weight: "bold",
              },
              padding: 6,
              formatter: Math.round,
            },
          },
        },
        plugins: [ChartDataLabels],
      });
      
      
function changeData() {
        _gaugeValue = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[1].data = [
          _gaugeValue,
          _gagueMaxVal - _gaugeValue,
        ];
        myGauge.update();
      }

function changeData2() {
        _gaugeValue2 = Math.floor(Math.random() * 100) - 1;
        myGauge.data.datasets[0].data = [
          _gaugeValue2,
          _gagueMaxVal2 - _gaugeValue2,
        ];
        myGauge.update();
      }

.gauge-container {
  margin: auto;
}

.button-container {
  margin: auto;
  padding: 10px;
}

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
      integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"
      integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>


<div class="gauge-container">
      <canvas id="myCanvasGauge"></canvas>
    </div>

    <div class="button-container">
      <button onclick="changeData()">Change Data 1</button>
    </div>
    <div class="button-container">
      <button onclick="changeData2()">Change Data 2</button>
    </div>

如何隐藏特定数据的标签？，chartjs 插件数据标签

How to hide label of specific data?, chartjs plugin datalabels

javascript

charts