html 制作条形图,Highcharts 基本条形图
Highcharts 基本条形图
以下实例演示了基本条形图。
我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。
配置
chart 配置
设置 chart 的 type 属性 为 bar ,chart.type 描述了图表类型。默认值为 "line"。
var chart = {
type: 'bar'
};
实例
文件名:highcharts_bar_basic.htm
Highcharts 教程 | 菜鸟教程(runoob.com)
$(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',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
};
var credits = {
enabled: false
};
var series= [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$('#container').highcharts(json);
});
以上实例输出结果为:
html 制作条形图,Highcharts 基本条形图相关推荐
- python堆叠条形图_Highcharts 堆叠条形图
Highcharts 堆叠条形图 以下实例演示了堆叠条形图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 plotOptions 配置图表堆叠 ...
- Python使用matplotlib可视化发散型条形图、发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图、并按照大小排序区分数据(Diverging Bars)
Python使用matplotlib可视化发散型条形图.发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图.并按照大小排序区分数据(Diverging Bars) 目录
- R语言ggplot2可视化发散型条形图、发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图、并按照大小排序区分数据(Diverging Bars)
R语言ggplot2可视化发散型条形图.发散条形图(Diverging Bars)是一种可以同时处理负值和正值的条形图.并按照大小排序区分数据(Diverging Bars) 目录
- R语言ggplot2可视化绘制分组水平条形图并在条形图的各种位置添加数值标签实战
R语言ggplot2可视化绘制分组水平条形图并在条形图的各种位置添加数值标签实战 目录
- Python使用matplotlib绘制柱状图(bar plot)实战:水平条形图、垂直条形图、分组条形图、堆叠条形图
Python使用matplotlib绘制柱状图(bar plot)实战:水平条形图.垂直条形图.分组条形图.堆叠条形图 目录
- python使用matplotlib绘制水平条形图并在条形图上添加实际数值标签实战
python使用matplotlib绘制水平条形图并在条形图上添加实际数值标签实战 # 绘制水平条形图进行模型对比 x_labels = ["LogisticRegression" ...
- 【MATLAB】进阶绘图 ( Bar 条形图 | bar 函数 | bar3 函数 | Bar 条形图样式 | 堆叠条形图 | 水平条形图 | barh 函数 )
文章目录 一.Bar 条形图 1.bar 函数 2.矩阵数据表示 3.bar 函数代码示例 二.Bar 条形图样式 1.bar 函数样式 2.堆叠条形图示例 三.水平条形图 1.barh 函数 2.代 ...
- R语言数据可视化 画并列条形图和堆叠条形图
本文将以R自带的数据集Titanic为例,来画并列条形图和堆叠条形图!!!!! 绘制并列条形图和堆叠条形图 我们可以看看数据集Titanic ?Titanic 从Titanic中是4X4的列联表,其中 ...
- R 绘制 堆砌条形图和分组条形图
如果height是一个矩阵而不是一个向量,则绘图结果将是一幅堆砌条形图或分组条形图. 若beside=FALSE(默认值),则矩阵中的每一列都将生成图中的一个条形,各列中的值将给出 堆砌的" ...
最新文章
- 投入千亿的菜鸟网络智慧物流做得怎么样?
- 【转】CSS 与 HTML5 响应式图片
- Python面向对象中反射和双下的正确用法
- boost::hana::contains用法的测试程序
- 数据持久化 plist,CoreData,Sqlite
- 使用OpenTelemetry搭配Zipkin构建NetCore分布式链路跟踪 | WebAPI + gRPC
- AngularDart Material Design 选项树
- 帮您管好云:阿里云混合云管理平台发布 | 凌云时刻
- cmd命令行乱码 oracle_Oracle查询中文乱码问题
- mbedtls | 01 - 移植mbedtls库到STM32的两种方法
- easypanel php.ini,Linux下EasyPanel及PHP安装升级
- 谁说码农不懂浪漫?js写的'老婆生日快乐'特效
- 分享一个nodejs中koa操作redis的工具类 基于 ioredis
- 替代台湾安格AG6200 AG6201 HDMI转VGA带音频方案+设计电路|CS5213可替代AG6200 AG6201
- iOS偏好设置的存储注意事项
- 802.11ax简要笔记
- 上海之旅,再让键盘长几天草
- IT媒体、杂志投稿大全
- 海思HI35xx平台软件开发快速入门之视频分辨率
- vs2019 开始自己的第一个F#程序
热门文章
- 从0搭建一个Springboot+vue前后端分离项目(五)创建后台Springboot工程
- python中深浅复制教程
- Python基础教程:hashlib和hmac模块
- python基础教程:3种控制流语句(if,for,while)
- Python中map和reduce函数?
- Python标准库 数学与随机数 (math包,random包)
- yii mysql 2002_YII 错误 SQLSTATE[HY000] [2002] No such file or directory
- php维持登录,php怎么保持登录状态?
- 【中级软考】段页式存储是什么?
- pip安装包时如何指定安装在哪个python下?