为什么使用jQuery为Easy Pie Chart设置data属性不生效

问题根本原因 #

Easy Pie Chart 仅在首次初始化时读取DOM元素的data-percent属性作为初始数值，初始化完成后：

• 使用attr('data-percent', xxx)仅修改了DOM属性，插件不会主动监听DOM属性变更，不会触发图表更新
• jQuery的.data('percent', xxx)是将值存在jQuery内部缓存中，并不会修改DOM上的data-*属性，插件也不会读取这份缓存的新值

正确解决方法 #

使用插件官方提供的update方法更新数值即可，无需手动修改data属性：

1. 如果你之前是用原生JS初始化的，直接调用实例的update方法：

// 初始化时保存实例（替换为你自己的初始化配置）
const conversionChart = new EasyPieChart(document.querySelector('#ConversionCostPercentage'), {
  barColor: '#ef1e25',
  trackColor: '#f2f2f2',
  scaleColor: false,
  lineWidth: 2,
  lineCap: 'round',
  size: 110,
  animate: 1000
});

// 拿到JSON返回值后更新
conversionChart.update(thejson.ConversionCostPercentage);

2. 如果你之前是用jQuery方式初始化的，可以直接从元素的data缓存中取实例再更新：

const conversionChart = $('#ConversionCostPercentage').data('easyPieChart');
conversionChart.update(thejson.ConversionCostPercentage);

调用update方法后，插件会自动更新内部状态、进度动画、以及data-percent属性，不需要额外操作。

内容的提问来源于stack exchange，提问作者Stig Kølbæk