📜  Graph pie - Javascript (1)

📅  最后修改于: 2023-12-03 14:41:37.806000             🧑  作者: Mango

Graph Pie - JavaScript

Graph Pie is a JavaScript library for creating beautiful and interactive pie charts on your web page. It's easy to use and highly customizable, making it a great choice for developers of all skill levels.

Installation

You can install Graph Pie using npm:

npm install graphpie --save

Alternatively, you can download the source code directly from GitHub and include it in your project manually.

Usage

Creating a Graph Pie chart is straightforward. First, include the Graph Pie library in your HTML page:

<script src="path/to/graphpie.js"></script>

Next, create a canvas element where the chart will be displayed:

<canvas id="myChart"></canvas>

Finally, create a new Graph Pie instance and pass in the canvas element and the data for your chart:

var data = [
  { label: "Apple", value: 10 },
  { label: "Banana", value: 20 },
  { label: "Orange", value: 15 }
];

var chart = new GraphPie(document.getElementById("myChart"), data);

That's it! Your pie chart will now be displayed on the page.

Customization

Graph Pie provides a wide range of customization options to give you complete control over the look and feel of your charts. Some of the most commonly used options include:

  • backgroundColor: The background color of the chart.
  • borderColor: The color of the pie chart border.
  • borderWidth: The width of the pie chart border.
  • legendPosition: The position of the legend in relation to the chart.
  • legendFontColor: The color of the legend text.
  • legendFontSize: The font size of the legend text.

You can set these options by passing an options object to the GraphPie constructor:

var options = {
  backgroundColor: "#f2f2f2",
  borderColor: "#fff",
  borderWidth: 2,
  legendPosition: "bottom",
  legendFontColor: "#333",
  legendFontSize: 14
};

var chart = new GraphPie(document.getElementById("myChart"), data, options);
Conclusion

Graph Pie is a versatile and powerful JavaScript library for creating beautiful and interactive pie charts on your web page. Whether you're a beginner or an experienced developer, Graph Pie provides the tools you need to create stunning visualizations of your data.