Как я могу изменить параметры конфигурации плагина jQuery "easy pie chart"?

Question

Я использую jQuery легкий плагин круговой диаграммы для создания круговых диаграмм. Изначально я передаю параметры конфигурации по умолчанию. После этого я хочу изменить параметры конфигурации, такие как 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

Мы должны уничтожить существующие данные, а затем воссоздать график

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

Answer 2

Похоже, что на данный момент "простая круговая диаграмма" не поддерживает динамические параметры.

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

Если вы хотите придерживаться плагина, вы можете полностью воссоздать диаграмму на модификациях (то есть уничтожить предыдущий график и создать новый).

Answer 3

Вы можете установить эти значения для каждого графика на странице, для каждого идентификатора, а не только для класса.

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

});

Кроме того, вы можете изменить эти значения из CSS.

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

Другой вариант - добавить дополнительный класс по клику (обновить).

Answer 4

Решение состоит в том, чтобы удалить.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({ .... });

Это может быть событие щелчка или все, что вы хотите.

Вот и все. Простое решение.