JS封装动态柱形图

最新推荐文章于 2025-02-27 13:13:58 发布

雨落骆罗

最新推荐文章于 2025-02-27 13:13:58 发布

阅读量1.5k

点赞数

本文链接：https://blog.youkuaiyun.com/jfsdkl/article/details/84981949

版权

本文展示了如何使用JavaScript创建动态柱形图，包括设置图表的样式、数据、动画效果和坐标轴提示。通过示例代码，解释了如何定义柱形图的各个属性并动态绘制图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看一下效果图

代码如下：
<body>
<div id="container"></div>
</body>
<script src="../../../js/jrChart.js"></script>
<script>
    var obj = {
        id: "container",    //容器的id(必填项)
        borderType:1,     // 1:全包 2：半包 3：没有边框
        borderColor:"red",  //边框颜色
        barWidth:40,
        width:500,         //容器的宽度
        height:300,       //容器的高度
        lines:4,         //分隔线的数量
        linesColor:"#f4bf3f",  //分隔线的颜色
        lineTipColor:"#f4bf3f", //分隔线的提示颜色
        title: "GDP对比图",   //显示的标题
        titleColor:"#f4bf3f",  //标题的颜色
        marginLeft:200,
        marginTop:50,
        date: [          //源数据  （必填项）
            {
                label: "威海",
                num: 170,
                color:"blue",
                labelColor:"blue"
            },
            {
                label: "青岛",
                num: 270,
                color:"red",
                labelColor:"red"
            },
            {
                label: "烟台",
                num: 200,
                color:"green",
                labelColor:"green"
            }
        ]
    };

最低0.47元/天解锁文章