Frappe Chart ——柱状图

柱状图学习

1.请使用互联网上的图形工具(推荐: Frappe Chart)与以下中国历年GDP数据与世界主要各国军费预算。分别产生Bar chart，如下图所示。请同学完成此网页内容与相应所需的java script。

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Frappe Chart下的柱状图</title>
    <script src="Frappe/frappe-charts.min.js"></script>
</head>

<body>
    <div >
        <div >
            <h6 >长条图</h6>  
            <div id="chart-trends"></div>
        </div>
    </div>

    <script>
    //放置图表，图表为Trends Chart

        //定义图表数据
        let trends_data = {
            //横坐标，设置为标签
            labels: [1999, 2000, 2001, 2002, 2003, 2004,
                2005, 2006, 2007, 2008, 2009, 2010, 2011,
                2012, 2013, 2014, 2015, 2016, 2017],

            //数据集
            datasets: [
                {
                    //柱状图上的数据，设置为值
                    values: [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773,
                        3552182.312, 4598206.091, 5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11,
                        11064666.28, 11190992.55, 12237700.48]
                }
            ]

        };

        let plotChartArgs = {
            title: "中国GDP历年成长情形(单位:百万美元)",//图表标题
            data: trends_data,//图表数据
            type: 'bar',
            height: 300,
            colors: ['#0000ff'],

            lineOptions: {
                hideDots: 0,//隐藏点
                heatline: 0,
                regionFill: 1,
                hideLine: 0//隐藏行
            },

            axisOptions: {
                xAxisMode: 'tick', //x轴线 隐藏
                yAxisMode: 'span',//y轴线  显示
                xIsSeries: 1 //设置多组数据的显示来自
            }

        };

        new Chart("#chart-trends", plotChartArgs);

    </script>
</body>
</html>

运行

在这里插入图片描述

过程遇到问题

假如没有这几行代码

  axisOptions: {
                xAxisMode: 'tick', //x轴线 隐藏
                yAxisMode: 'span',//y轴线  显示
                xIsSeries: 1 
            }

运行结果会不一样！
在这里插入图片描述运行起来变成表格图

以上是画的第一个柱形图，要是有出错的地方，欢迎指出，谢谢。

0 条评论