Question

我正在使用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的大小。但它不起作用

告诉我，我使用的插件是否符合我的要求？如果有，我该如何解决这个问题？

Answer 1

现在看来，“简单的饼图”不支持动态选项。

请参阅https://github.com/rendro/easy-pie-chart/issues/65

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

Answer 2

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

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

Answer 3

您可以为每个ID设置页面上每个图表的这些值，不仅适用于该类。

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

}）;

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

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

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

Answer 4

解决方案是.move .chart并再次将其追加到父级中。例如：

这是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({ .... });

它可以是单击事件或您想要的所有内容。

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

如何更改jQuery“easy pie chart”插件的配置参数？

4 个答案: