Highcharts 基本条形图;Highcharts 堆叠条形图;Highcharts 反向条形图_51CTO博客_echarts堆叠条形图

Highcharts 基本条形图;Highcharts 堆叠条形图;Highcharts 反向条形图

Highcharts 基本条形图;Highcharts 堆叠条形图;Highcharts 反向条形图

原创

佛系程序猿 博主文章分类:web前端 ©著作权

文章标签 Highcharts 图表库 文章分类 前端开发

©著作权归作者所有:来自51CTO博客作者佛系程序猿的原创作品,请联系作者获取转载授权,否则将追究法律责任
Highcharts 基本条形图

 


配置

chart 配置

设置 chart 的 type 属性 为 bar ,chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: 'bar'
};

实例

文件名:highcharts_bar_basic.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: 'bar'
   };
   var title = {
      text: 'Historic World Population by Region'   
   };
   var subtitle = {
      text: 'Source: Wikipedia.org'  
   };
   var xAxis = {
      categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
      title: {
         text: null
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: 'Population (millions)',
         align: 'high'
      },
      labels: {
         overflow: 'justify'
      }
   };
   var tooltip = {
      valueSuffix: ' millions'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      }
   };
   var legend = {
      layout: 'vertical',
      align: 'right'
  • 收藏
  • 评论
  • 举报
提问和评论都可以,用心的回复会被更多人看到 评论
发布评论
相关文章

举报文章

请选择举报类型

内容侵权 涉嫌营销 内容抄袭 违法信息 其他

具体原因

包含不真实信息 涉及个人隐私

补充说明

0/200

上传截图

格式支持JPEG/PNG/JPG,图片不超过1.9M

已经收到您得举报信息,我们会尽快审核