jQuery

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

November 17, 2015

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>