javascript - How can I change configuration parameters of jQuery "easy pie chart" plugin? - Stack Overflow

admin管理员组

文章数量:1346043

I am using jQuery easy pie chart plugin for making pie charts. Initially I pass default configuration parameters. After that I want to change configuration parameters like bar-color, size of pie chart.

Default configuration parameters:

$('.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));
    }
});

I know how to set the percentage value of pie-chart dynamically, just like in the following way:

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

Except percentage, I want to set configuration parameters dynamically like:

I want to set size, bar-color of pie chart dynamically. For this I tried a lot of things but I didn't find the right way.

For this,I made JSFIddle for understanding.Initially size should be 110 after click on redraw button needs to change the size of pie chart.But it's not working.

Tell me, does the plugin I am using fulfill my requirements? If it does, how can I fix this?

I am using jQuery easy pie chart plugin for making pie charts. Initially I pass default configuration parameters. After that I want to change configuration parameters like bar-color, size of pie chart.

Default configuration parameters:

$('.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));
    }
});

I know how to set the percentage value of pie-chart dynamically, just like in the following way:

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

Except percentage, I want to set configuration parameters dynamically like:

I want to set size, bar-color of pie chart dynamically. For this I tried a lot of things but I didn't find the right way.

For this,I made JSFIddle for understanding.Initially size should be 110 after click on redraw button needs to change the size of pie chart.But it's not working.

Tell me, does the plugin I am using fulfill my requirements? If it does, how can I fix this?

• javascript
• jquery
• css
• jquery-easyui

Share Improve this question Follow edited Feb 21, 2014 at 13:56 user3279058 asked Feb 20, 2014 at 11:26 user3279058user3279058 56944 gold badges88 silver badges2222 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

We must destroy the existing data and then recreate the graph

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

It seems that, as of now, the "easy pie chart" does not support dynamic options.

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

If you want to stick with the plugin, you might want to recreate the chart pletely on modifications (i.e. destroy the previous chart and create a new one).

You can set these values for each chart on the page, for each id, not only for the class.

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

});

Also, you can change these values from CSS.

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

Another option is to add an extra class on click (update).

The solution is to .remove .chart and to .append it again in the parent. For example:

Here is the 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>');

And after that:

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

It can be on click event or everything you want.

That's it. Simple solution.

本文标签： javascriptHow can I change configuration parameters of jQuery quoteasy pie chartquot pluginStack Overflow