简体   繁体   中英

How can I change the circle size of pie chart with jqplot?

I have no idea how I can change the circle size.

In my chart, the circle is very small.

I want a bigger circle than it is currently.

 plot2 = jQuery.jqplot('PieChart',[ ticks ,rs_money], 
{
     grid: {
            drawBorder: false, 
            drawGridlines: false,
            background: 'transparent',

            shadow:false
        },
        axesDefaults: {

        },
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true,
                startAngle: 180, 
                sliceMargin: 2

            }
        },

  legend: {  fontSize:'11px',show:true,location: 's', labels:ticks}
}

I alter the size of the circle via CSS. The pie itself is set up to shrink or grow with the div, as long as it isn't too small. Try styling the div with width and height to see if that is what you're looking for.

<div id="pieChart" style="width:50%;height:50%;"></div>

You can also go into the jqplot.pieRenderer.js and look for

this.diameter=null;this.padding=20;

The null value can be changed to any number you like to make the circle bigger. If you make it bigger than your div though, it will stretch out of the div's bounds. You can also change the padding to have the circle take up more space in the div.

Check out their documentation:

http://www.jqplot.com/docs/files/jqPlotOptions-txt.html

seriesDefaults: {
        rendererOptions: {
            diameter: <your value>, // diameter of pie, auto computed by default.
    table.jqplot-table-legend {
    table-layout: fixed;
}

td.jqplot-table-legend-label
{
   max-width:100px;
}
    seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,
            rendererOptions: {
              padding: 10
            }
    }

You can reduce the space by using padding option.By changing padding you can change the size of pie chart.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM