如何在chartjs中扩展圆环图的切片?

oogrdqng  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(205)

有没有办法在chartjs中的click事件或鼠标悬停时展开圆环图的切片?.我使用的是chart.js@2.8.0 version.

deikduxw

deikduxw1#

我已使用以下代码修复了此问题:

let segment;
   this.chart = new Chart(this.canvas, {
    type: this.type,
    data: this.data,
    options: {
      ...this.options,
      onHover: function (evt, elements) {
        if (elements && elements.length) {
          segment = elements[0];
          this.chart.update();
          selectedIndex = segment["_index"];
          segment._model.outerRadius += 10;
        } else {
          if (segment) {
            segment._model.outerRadius -= 10;
          }
          segment = null;
        }
      },
      layout: {
        padding: 30
      }
    }
  });

希望对你有帮助。

hec6srdp

hec6srdp2#

Shift+缩放当前选中的切片并不是一个功能,但它已经在各种论坛和项目的GitHub社区中讨论过多次:

Github讨论中包含了一个使用Chart.js 1.0为饼图编写的小提琴。下面是当前Chart.js版本的更新版本,它支持圆环图。

代码:

这部分只展示了缩放活动元素的部分,它只是让你知道如何使用活动元素的.innerRadius.outerRadius属性来移动元素。fiddle包含了完整的代码,也处理了缩小先前选择的元素。
第一个

示例图像:

以下是突出显示的切片的示例:

限制:

这个示例有两个限制,我没有包括在内:

  • Chart.js不允许定义图例和图表内容之间的边距,因此当您“缩放”/“移动”时,缩放的切片可能会与部分图例重叠。您可以通过扩展图例来解决此问题,如Jordan Willis' Codepen中所示,它是this SO question的结果。
  • 所选切片将与其余切片保持接触。如果希望它有间隙,则需要根据活动切片的.startAngle.endAngle属性平移活动切片的xy
vm0i2vca

vm0i2vca3#

另一个简单的窍门:hoverBorderWidth
第一个

相关问题