highcharts柱状图

最新推荐文章于 2025-06-03 09:09:19 发布

原创最新推荐文章于 2025-06-03 09:09:19 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Highcharts库创建一个简单的柱状图，并为不同的数据系列设置特定的颜色。通过示例代码展示了如何定义图表类型、配置轴标签及图例等。

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

HighchartsDemo案例下载地址：

点击打开链接

如图所示

JSP代码

<!DOCTYPE html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts 测试柱状图颜色</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>		
<script src="./code/highcharts.js"></script>
<script src="./code/modules/exporting.js"></script> 
</head>
<script type="text/javascript">							       
$(function () {   
    $('#container').highcharts({  
        chart: {  
            type: 'column'  
        },  
        title: {  
            text: 'My first Highcharts chart'  
        },  
        xAxis: {  
            categories: ['my', 'first', 'chart']  
        },  
        yAxis: {  
            title: {  
                text: 'something'  
            }  
        },  
        series: [{  
            name: 'Jane',
			color:'#F6BD0F',	
            data: [1, 22, 4]  
        }, {  
            name: 'John',
			color:'#AFD8F8',			
            data: [5, 7, 3]  
        }, {  
            name: 'Jack',
			color:'#8BBA00',			
            data: [5, 7, 3]  
        }]  
    });  
});

</script>
<body>
 <div class="echarts" id="container" style="width:600px;height:400px"></div>
</body>

</html>