html chart.js插件的应用快速绘制图表

最新推荐文章于 2024-05-14 02:27:52 发布

&相守年华。

最新推荐文章于 2024-05-14 02:27:52 发布

阅读量341

点赞数

文章标签： chartjs API 绘制图表

本文链接：https://blog.csdn.net/qq_39791748/article/details/96973016

版权

最近在做项目的时候遇到了，html中绘制图表，本想用AdminTLE中的图表框架，查了好多，最后查到了一个专门的插件chart.js，API开发文档，使用非常的方便。

DEMO演示

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
        <script src="assets/js/Chart.min.js"></script>
        <script src="assets/js/jquery-3.3.1.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <div class="chart" style="height: 250px;width: 800px;">                                    
            <canvas id="pieChart" style="height: 250px;">

            </canvas>
        </div>
        <script>
            var char_test = document.getElementById('pieChart').getContext('2d');
            var myChart = new Chart(char_test, {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                            label: 'fafaf',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1,
                            hoverBorderWith: 2,
                            hoverBorderColor: '#000'
                        }]
                },
                options: {
                    title: {
                        display: true,
                        text: 'fafafafafa'
                    },
                    legend: {
                        position: 'right',
                        display: true,
                        labels: {
                            fontColot: '#000'
                        }
                    },
                    layout: {
                    },
                    tooltips: {
                        enable: true
                    },
                    scales: {
                        xAxes: [{
                                stacked: true
                            }],
                        yAxes: [{
                                stacked: true
                            }]
//                        yAxes: [{
//                                ticks: {
//                                    beginAtZero: true
//                                }
//                            }]
                    }
                }
            });
        </script>
    </body>
</html>

该API提供了，多种图表，具体可以查API开发文档，详细说明。

&相守年华。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html chart.js插件的应用快速绘制图表

最近在做项目的时候遇到了，html中绘制图表，本想用AdminTLE中的图表框架，查了好多，最后查到了一个专门的插件chart.js，API开发文档，使用非常的方便。DEMO演示<html> <head> <title>TODO supply a title</title> <meta charset...
复制链接

扫一扫