【jQuery】マテリアルデザイングラフMaterial Charts

Material Chartsはマテリアルデザインのような棒グラフ、円グラフを実装するJavaScriptとCSS。

CSS

<link rel="stylesheet" href="css/material-charts.css">

JS

<script src="js/material-charts.js"></script>

Bar Charts

var exampleBarChartData = {
"datasets": {
"values": [5, 10, 30, 50, 20],
"labels": [
"Apples", 
"Oranges", 
"Berries", 
"Peaches", 
"Bananas"
], "color": "blue"
},
"title": "Example Bar Chart",
"height": "300px",
"width": "500px",
"background": "#FFFFFF",
"shadowDepth": "1"
};
MaterialCharts.bar("#bar-chart-example", exampleBarChartData) 
<div id="bar-chart-example"></div>

Pie Charts

var examplePieChartData = {
"datasets": {
"values": [5, 30, 5, 20, 40],
"labels": [
"Apples", 
"Oranges", 
"Berries", 
"Peaches", 
"Bananas"
],
},
"title": "Example Pie Chart",
"height": "300px",
"width": "500px",
"background": "#FFFFFF",
"shadowDepth": "1"
};
MaterialCharts.pie("#pie-chart-example", examplePieChartData)
<div id="pie-chart-example"></div>
 

【jQuery】マテリアルデザイングラフMaterial Charts

  • LATEST
  • RELATED
  • POPULAR