highcharts 柱状图插件

最新推荐文章于 2018-01-10 09:45:37 发布

helentang1987

最新推荐文章于 2018-01-10 09:45:37 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

分类专栏：前端插件

本文链接：https://blog.youkuaiyun.com/wanwei1987/article/details/70210553

前端插件专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用Highcharts实现的柱状图配置示例，包括如何设置标题、副标题、图表类型、X轴标签样式、图例、提示框、数据系列等属性，并展示了如何在柱状图上显示数据标签。

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

文档链接：https://api.hcharts.cn/#plotOptions.column.dataLabels.style

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title>饼状图</title>
       <script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
       <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
   </head>
   <style type="text/css">
   </style>

   <body>
       
       <div style="width:100%;height:360px;float:left;background: white;">
           <div id="container" style="min-width: 310px; height: 360px;margin-left: 10px;"></div>
       </div>
   </body>
<script type="text/javascript">
window.onload = function() {
   var data1 = [1,2,3,4];
   var data2 = [5,6,7,8];
   var data3 = [9,10,11,12];
   /*插件初始化测试*/
   Highcharts.chart('container', {
               title: {//主标题
                    text:null
               },
               subtitle: {//副标题
                    text: null
               },
               chart: {//类型
                    type: 'column'
                },
               xAxis: {//X轴字体
                   categories: ['今日', '昨日', '最近一周', '最近一月'],
                    labels: {
                        style: {
                            color: '#8c7070',//颜色
                            fontSize:'16px' //字体
                        }
                    }
               },
               credits:{//右下角的文本
                    enabled: false
                },
               tooltip: {
                    crosshairs: true
                },
               series: [{
                   type: 'column',
                   name: '红色代表结算',
                   data: data1,
                   color : 'red'
               }, {
                   type: 'column',
                   name: '绿色代表抽成',
                   data: data2,
                   color :'#7AFEC6'
               }, {
                   type: 'column',
                   name: '蓝色代表总金额',
                   data: data3,
                   color :'#66B3FF',
                   fontSize:"9px"
               }, {
                   type: 'pie',
                   center: [100, 80],
                   size: 100,
                   showInLegend: false,
                   dataLabels: {
                       enabled: true
                   }
               }],
               plotOptions: {//柱状图上是否显示数字 enabled:true
                    series: {
                        dataLabels: {
                            enabled: true,
                            style:{
                               fontSize:"12px",
                               color :"#826161",
                               fontWeight: 'bold',
                               textOutline: "1px 1px contrast",
                                fontFamily: "Helvetica Neue,Helvetica,Arial,sans-serif"
                            }
                        }
                    },
                    column: {
                       pointPadding: 0.1
                   }
                } ,
                chart: {
                    renderTo: container,
                    spacingTop: 7,
                    spacingRight: 0,
                    spacingBottom: 1,
                    spacingLeft: 0
                }
   });
}

</script>

</html>