如何更改 jQuery“简易饼图”插件的配置参数？答案

【问题标题】：How can I change configuration parameters of jQuery "easy pie chart" plugin?如何更改 jQuery“简易饼图”插件的配置参数？
【发布时间】：2014-03-21 07:25:21
【问题描述】：

我正在使用 jQuery easy pie chart plugin 制作饼图。最初我传递默认配置参数。之后我想更改饼图的bar-color、size等配置参数。

默认配置参数：

$('.chart').easyPieChart({
    easing: 'easeOutCirc',
    barColor: '#1abc9c  ',
    trackColor: '#f9f9f9  ',
    scaleColor:false,
    scaleLength: 5,
    percent: 67,
    lineCap: 'round',
    lineWidth: 15, //12
    size: 150, //110
    animate: {duration: 2000, enabled: true},
    onStep: function (from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent));
    }
});

我知道如何动态设置饼图的percentage值，就像下面这样：

$('#'+domId).data('easyPieChart').update(value);

除了percentage，我想动态设置配置参数如：

我想动态设置饼图的size、bar-color。为此，我尝试了很多方法，但没有找到正确的方法。

为此，我制作了JSFIddle以供理解。初始大小应为110，点击redraw按钮后需要更改pie chart的大小。但它不起作用。

告诉我，我使用的插件是否满足我的要求？如果是这样，我该如何解决？

【问题讨论】：

标签： javascript jquery css jquery-easyui

【解决方案1】：

我们必须销毁现有数据，然后重新创建图表

var $chart = $(".easy-pie-chart");
        $chart.data('easy-pie-chart', null);
        $chart.easyPieChart({
           // my new settings here
        });

【讨论】：

【解决方案2】：

目前看来，“简易饼图”不支持动态选项。

见https://github.com/rendro/easy-pie-chart/issues/65

如果您想坚持使用该插件，您可能希望在修改后完全重新创建图表（即销毁之前的图表并创建一个新图表）。

【讨论】：

【解决方案3】：

您可以为页面上的每个图表、每个 id 设置这些值，而不仅仅是类。

var chart = window.chart = $('#easypiechart1').data('easyPieChart');
$('.chart')#easyPieChart({
barColor: '#333',
}

});

此外，您可以通过 CSS 更改这些值。

.easypiechart {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
}

另一种选择是在点击（更新）时添加一个额外的类。

【讨论】：

【解决方案4】：

解决方案是 .remove .chart 并在父级中再次 .append 。例如：

这是 HTML：

<div class="chart-holder" data-count="86"><span class="chart" data-percent="86"></span></div>

JS：

$('.chart-holder').find('.chart').remove();
$('.chart-holder').append('<span class="chart" data-percent="'+ $('.chart-holder').attr('data-count') +'"></span>');

然后：

$('.chart').easyPieChart({ .... });

它可以是点击事件或任何你想要的。

就是这样。简单的解决方案。

【讨论】：