JS封装动态柱形图

最新推荐文章于 2025-10-31 13:56:44 发布

原创

最新推荐文章于 2025-10-31 13:56:44 发布 · 1.6k 阅读

收录于

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

首先看一下效果图

代码如下：
<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: "烟台",