附加说明：

Question

这可能是一个简单的问题，但我在最后一个小时左右的时间里一直在试验而没有成功的结论。基本上，我有以下HTML：

<div data-trackcolor="#f39e93" data-size="60" data-linewidth="3" data-animate="500" data-percent="0" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;">
  <span class="white font-90">0%</span>
  <canvas height="65" width="65" style="width: 60px; height: 60px;"></canvas>
</div>

我尝试使用以下jQuery语法更改data-trackcolor元素的值：

$('[data-toggle=easypiechart]').data('trackcolor','#f39e93');

我也试过$(".easyPieChart").attr("data-trackcolor", "#f39e93");。

值正在变化，颜色不变。我怀疑这是因为canvas元素。为了理解此标记的作用，您可以查看以下URL。

它在彩色数据库中显示圆圈。如果有人可能有一些想法，为什么这不起作用，我将不胜感激。

感谢。

Answer 1

根据THIS脚本文件中编写的代码（来自您提供的链接），这些数据值仅在加载页面时使用一次。因此，动态对这些属性所做的更改不会影响图表颜色或其他任何内容。

Answer 2

使用$.data，您可以读取和设置数据值，但不能使用它在DOM中写入。来自data方法的jQuery文档：https://api.jquery.com/data/

附加说明：

请注意，此方法目前不像Internet Explorer那样为在XML文档上设置数据提供跨平台支持   不允许通过expando属性附加数据。

更新

别介意，我把这个问题弄糊涂了。

<击> 作为替代方法，使用attr setter：

$('#testBtn').on('click', function (ev){ $("[data-toggle='easypiechart']").attr('data-trackcolor', '#f39e93'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div data-trackcolor="#fff" data-size="60" data-linewidth="3" data-animate="500" data-percent="0" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;"> <span class="white font-90">0%</span> <canvas height="65" width="65" style="width: 60px; height: 60px;"></canvas> </div> <button id="testBtn">Test</button>

经过一些进一步的分析后，我得出结论：您不需要更改数据属性，因为它们在加载时只读取一次。要更改轨道颜色，您需要获取easyPieChart实例并更新其选项并触发update功能。

实例在元素数据中分配，属性名称为easyPieChart。

请参阅第167行的http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/jquery.easypiechart.js

... return c.data("easyPieChart", new a.easyPieChart(e, f)) ...

全部放在一起

// simulates the initialisation InitiateEasyPieChart.init(); // var getPies = function(){ return $('[data-toggle="easypiechart"]'); }; var changePiesTrackColor = function(color){ var $pies = getPies(); $pies.each(function(idx, el){ var $el = $(el); var easypiechartInstance = $el.data('easyPieChart'); easypiechartInstance.options.trackColor = color; var currentValue = $el.data('percent'); // there is no way to get the current Value from the instance because the scop of it is "privat". easypiechartInstance.update(currentValue); }); };

<div data-trackcolor="#f39e93" data-size="60" data-linewidth="3" data-animate="500" data-percent="10" data-linecap="butt" data-barcolor="#fff" class="easyPieChart" data-toggle="easypiechart" style="width: 60px; height: 60px; line-height: 60px;"> </div> <hr /> <button onclick="changePiesTrackColor(getcolor('#0000ff'))">blue</button> <button onclick="changePiesTrackColor(getcolor('#00ff00'))">green</button> <button onclick="changePiesTrackColor(getcolor('#ff0000'))">red</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/beyond.min.js"></script> <script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/jquery.easypiechart.js"></script> <script src="http://beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/assets/js/charts/easypiechart/easypiechart-init.js"></script>

Answer 3

感谢Puneet，

我实际上是在页面加载时调用脚本，为了解决问题，我在函数中调用了脚本，改变了颜色，如下所示： -

function changeWidgetColor()
{
    var percentageValue = $(".easyPieChart").attr('data-percent');

    if (percentageValue <= 20)
    {
        $(".easyPieChart").attr("data-trackcolor", "#f39e93");

        InitiateEasyPieChart.init();
    }

}

如何更改数据属性值？

3 个答案:

附加说明：

更新

全部放在一起