Doughnut Chart with Rounded Corners (Original)

Add-ons

2026-07-26 03:59 5 次浏览 • 0 次下载 5.7KB

Doughnut Chart with Rounded Corners (Original)

Plugin Description: This plugin helps you create doughnut charts with rounded edges at the segment boundaries.

This plugin uses canvas to help you quickly create a doughnut chart with rounded segment boundaries.

Compatibility

Compatible with all mainstream desktop and mobile browsers. Not supported in IE8 and earlier versions.

Installation

1	`npm install donut-chart`

Usage

First, you need a canvas element as the rendering container.

1	`<canvas` `id="myCanvas"` `width="750"` `height="600"></canvas>`

Then create a doughnut chart object.

1	`var` `cir =` `new` `DonutChart('myCanvas', option)`

Finally, initialize it and optionally specify a callback function.

cir.init(function (result) {
        // result: Information about the selected range
})

Parameters

Option Example (Default Values)

var option = {
        type: 'pie', // pie: Doughnut chart || gauge: Gauge chart
        title: {
            show: true,
            text: 'Total Assets (CNY)',
            textStyle: {
                fontSize: "20px",
                lineHeight: "30px",
                color: '#9f9f9f'
            },
            subtext: '360',
            subtextStyle: {
                fontSize: "30px",
                lineHeight: "35px",
                color: '#e53344'
            },
            x: '50%', // Title position
            y: "50%",
        },
        tooltip: {
            show: true,
            fontStyle: "normal",    // Specifies the font style: normal || italic || oblique
            fontVariant: "normal",  // Specifies the font variant: normal || small-caps
            fontWeight: 'normal',   // Specifies the font weight: normal || bold || bolder || lighter || 100 || 200 || 300 || 400 || 500 || 600 || 700 || 800 || 900
            fontSize: "20px",   // Specifies the font size in pixels
            lineHeight: "30px", // Specifies the line height in pixels
            fontFamily: 'Arial',// Specifies the font family
            color: 'white',     // Font color
            backgroundColor: '#00000099', // Tooltip background
            formatter: function (param) {   // Similar to ECharts rich text editing
                var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                    "CNY}"
                return str
            },
            rich: {
                a: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'bold',
                    fontSize: "20px",
                    lineHeight: "30px",
                    fontFamily: 'Arial',
                    color: 'white',
                },
                c: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'normal',
                    fontSize: "20px",
                    lineHeight: "30px",
                    fontFamily: 'Arial',
                    color: 'white',
                },
                b: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'bold',
                    fontSize: "30px",
                    lineHeight: "35px",
                    fontFamily: 'Arial',
                    color: '#e53344',
                }
            }
        },
        x: "50%",   // Icon position
        y: "50%",
        radius: "30%",  // Radius
        lineWidth: "5%", // Ring width
        // {{if type === gauge: Gauge chart}}
 
        // max: 120, // Total mapped value
        // data: [{
        //     name: "Used Duration (minutes)",
        //     value: 85, // Mapped measurement value
        // }],
 
        // {{else if type === pie: Doughnut chart}}
 
        // data: [{
        //     name: "Account Balance (CNY)",
        //     value: 110,
        // }, {
        //     name: "Pending Fixed-Income Returns (CNY)",
        //     value: 120,
        // }, {
        //     name: "Funds in Transit (CNY)",
        //     value: 130,
        // }],
 
        // {{/if}}
        label: {
            show: true,
            fontStyle: "normal",
            fontVariant: "normal",
            fontWeight: 'bold',
            fontSize: "20px",
            lineHeight: "30px",
            fontFamily: 'Arial',
            color: '#9f9f9f',
            formatter: function (param) {
                var str = "{a|" + param.name + "}" + "{c|" + param.percent + "}" + '\n' + "{b|" + param.value +
                    "CNY}"
                return str
            },
            rich: {
                a: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'bold',
                    fontSize: "20px",
                    lineHeight: "30px",
                    fontFamily: 'Arial',
 
                },
                b: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'bold',
                    fontSize: "30px",
                    lineHeight: "35px",
                    fontFamily: 'Arial',
                    color: '#e53344',
                },
                c: {
                    fontStyle: "normal",
                    fontVariant: "normal",
                    fontWeight: 'bold',
                    fontSize: "20px",
                    lineHeight: "30px",
                    fontFamily: 'Arial',
 
                }
            }
        },
        capType: "round", // Rounded corners || butt: Square corners
        selectedStyle: {  // Style when selected
            color: "white", // Border color
            borderWidth: 10 // Border width
        },
        color: ["#fe7c00", "#e83227", "#32a676"],
        labelCoverTitle: true, // label: Whether to overlap the title
        backgroundArc: '#999' // Empty ring color
    }