如何访问图表中的控制器属性

发布于 2025-01-21 12:25:35 字数 683 浏览 4 评论 0 原文

彻底阅读了图表。JS文档后，我找不到任何方法来获取甜甜圈图的 Innerradius 。

这是我从Chart.js 2.x到

Chart.js 2.x中发现的众多问题之一，为了获得甜甜圈图的内部半径，我会做：

beforeDatasetsUpdate: c => {
  const radius = c.innerRadius;
}

现在，在Chart.js中3.x，我发现它深深地嵌套了：

beforeDatasetsUpdate: c => {
  const radius = c._metasets[0].data[0].innerRadius;
}

官方说：

图表。Innerradius现在居住在甜甜圈，派和北极星控制器

但是有什么方法可以直接访问它吗？我上面提到的方式似乎是一个黑客。

原文

After thoroughly reading the Chart.js documentation, I didn't find any method to get the innerRadius of a doughnut chart.

This is one of the many issues I found after migrating from Chart.js 2.x to 3.x

In Chart.js 2.x, to get the inner radius of a doughnut chart, I would do:

beforeDatasetsUpdate: c => {
  const radius = c.innerRadius;
}

Now, in Chart.js 3.x, I found it deeply nested in :

beforeDatasetsUpdate: c => {
  const radius = c._metasets[0].data[0].innerRadius;
}

The official migration guide says:

Chart.innerRadius now lives on doughnut, pie, and polarArea controllers

But is there any way to directly access it? The way I mentioned above seems like a hack.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

維他命╮ 2025-01-28 12:25:35

每个数据集都有自己的控制器，因此没有全局单一的甜甜圈控制器。因此，如果您想获得控制器，则需要从数据集的元数据中获取它：

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      }
    ]
  },
  options: {},
  plugins: [{
    beforeDatasetsUpdate: (chart) => {
      chart._metasets.forEach(e => {
        console.log(e.controller.innerRadius)
      })
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Each dataset has its own controller so there is no global single doughnut controller. So if you want to get the controller you need to get it from the meta of the dataset:

var options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      }
    ]
  },
  options: {},
  plugins: [{
    beforeDatasetsUpdate: (chart) => {
      chart._metasets.forEach(e => {
        console.log(e.controller.innerRadius)
      })
    }
  }]
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

回复收藏 0 原文

~没有更多了~