捕鱼自动开炮辅助

書名： HTML5 Data and Services Cookbook
作者名： Gorgi Kosev Mite Mitreski
本章字數： 517字
更新時間： 2021-08-06 16:49:57

Creating a pie chart

When visualizing proportions or percentages as a whole, we usually use pie charts. Pie charts are simple enough to draw on our own; however, to get more flexibility and aesthetically pleasing results, we're going to use the Flot charting library with its pie plugin.

Flot's pie plugin can show a pie with or without a legend, and has extensive options for controlling the position of the labels. It's also capable of rendering tilted pies and donuts. Support for interactive pies is also included.

In this recipe, we're going to make a pie chart of our visitor's browsers.

Getting ready

We'll need to download Flot from the official website at http://www.flotcharts.org/ and extract the contents to a separate folder named flot.

How to do it...

Let's write the HTML and JavaScript code.

Create the following HTML page in index.html:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Chart example</title>
    </head>
    <body>
        <div id="chart" style="height:600px; width:600px;"></div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="flot/jquery.flot.js"></script>
        <script src="flot/jquery.flot.pie.js"></script>
        <script type="text/javascript" src="example.js"></script>
    </body>
</html>

The page has a placeholder element for our chart.

Flot depends on the jQuery library that is included. To draw pie charts, we need to add Flot's pie plugin.

Create the example.js script:

$(function() {    
    var day = 24 * 60 * 60 * 1000;
    function getData(cb) {
        var browsers = [
            {label: 'IE', data: 35.5, color:"#369"},
            {label: 'Firefox', data: 24.5, color: "#639"},
            {label: 'Chrome', data: 32.1, color: "#963"},
            {label: 'Other', data: 7.9, color: "#396"}
        ];
        cb(browsers);
    }

    getData(function(data) {
        $.plot("#chart", data, {
        series: {
            pie: {
                show: true,
                radius: 0.9,
                label: {
                    show: true,
                    radius: 0.6,
                },
                tilt: 0.5
            }
        },
        legend: { show: false }
        });
    });
});

It produces the following pie chart:

How it works...

Flot requires that the pie slices data are provided as an array of objects. Every object contains the following two properties:

label: This is the label of the slice
data: This is the number of the slice—a number which can be any value (doesn't need to be a percentage)

When calling $.plot, the first argument is the placeholder element for the pie, the second is the array of pie slices, and the third contains the pie options.

In order to show a pie, a minimum options object is as follows:

{pie: {show: true}}

To customize the default pie, we use the following additions to the pie property:

radius: This specifies the size of the pie as a percentage of the canvas.
label: The show (Boolean) property is set to true to show the pie labels, and the radius property controls the distance of the labels from the center of the pie.
tilt: This performs a 3D tilt of the pie. If omitted, Flot will render an untitled circle-shaped pie.

There's more...

There are more options available, such as the following:

innerRadius: This is set to a value such as 0.5 to create a donut chart.
combine: This property is used to combine smaller slices into a single slice. It's an object containing the following properties:
- threshold: This is set to a percentage of the whole, for example, 0.1
- color: This is the color to use to render the "other" slice, for example, #888

For more details, see the pie examples at http://people.iola.dk/olau/flot/examples/pie.html.

官术网_书友最值得收藏!

HTML5 Data and Services Cookbook

Creating a pie chart

Getting ready

How to do it...

How it works...

There's more...