Highcharts翻译系列之二十一：条状图例子

最新推荐文章于 2021-02-23 20:56:15 发布
最新推荐文章于 2021-02-23 20:56:15 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Highchart 文章标签： 条状图 Highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiqingli/article/details/8751429
版权

Highcharts翻译系列之二十一：条状图例子

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>比例统计</title>
    <style type="text/css">
        .hh
        {
            font-weight: bold;
        }
    </style>
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'bar',
                        plotBorderWidth: 0,
                        marginRight: 60,
                        style:
                        {
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12px',
                            color: '#262626'
                        }
                    },
                    colors: [
	                       '#0476c5',
                           '#fe7d7e'
                            ],
                    title: {
                        text: '比例图',
                        style: {
                            fontWeight: 'bold',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12px',
                            color: '#262626'
                        }
                    },
                    subtitle: {
                        text: '',
                        style: {
                            color: '#9e9494',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12px',
                            display: 'none'
                        }
                    },
                    xAxis: {
                        lineWidth: 1,
                        tickLength: 5,
                        tickColor: '#272727',
                        tickmarkPlacement: 'on',
                        lineColor: '#272727',
                        labels:
                        {
                            style: {
                                color: '#262626',
                                fontSize: '11px'
                            }

                        },
                        categories: ['情况一', '情况二', '情况三', '情况四'],
                        title: {
                            text: '',
                            align: 'middle',
                            rotation: 0,
                            offset: 25,
                            style: {
                                color: '#262626',
                                fontSize: '12px',
                                fontWeight: 'normal',
                                display: 'none'
                            }
                        }
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        endOnTick: false,
                        gridLineWidth: 0,
                        lineWidth: 1,
                        lineColor: '#272727',
                        tickWidth: 1,
                        tickColor: '#272727',
                        tickPixelInterval: 70,
                        labels: {
                            formatter: function () {
                                return this.value + '%';
                            }
                        },
                        title: {
                            text: '(男女用户的比例(%))',
                            align: 'middle',
                            rotation: 0,
                            //offset: 5,
                            //y: -3,
                            style: {
                                color: '#262626',
                                fontSize: '11px',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundColor: null,
                        align: 'right',
                        borderWidth: 0,
                        verticalAlign: 'middle',
                        floating: true,
                        itemMarginBottom: 10,
                        shadow: false,
                        style: {
                            color: '#262626',
                            fontSize: '11px',
                            fontWeight: 'normal'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '' +
                        this.x + ': ' + this.y + ' %';
                        }
                    },
                    plotOptions: {
                        bar: {
                            pointPadding: 0,
                            groupPadding: 0.2,
                            borderWidth: 0,
                            shadow: false

                        },
                        series:
                        {
                            dataLabels: {
                                color: '#262626',
                                formatter: function () {
                                    return this.y + '%';
                                }
                            }
                        }
                    },
                    series: [{
                        name: '男',

                        data: [40, 87, 23, 8],
                        dataLabels: {
                            enabled: true
                        }
                    }, {
                        name: '女',

                        data: [45, 76, 20, 3],
                        dataLabels: {
                            enabled: true
                        }
                    }]
                });
            });

        });
    </script>
</head>
<body>
    <div id="container" style="width: 500px; height: 330px; margin: 0 auto; border: 1px solid red;">
    </div>
</body>
</html>

 

运行效果：

 

自律2019
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可视化技术介绍之Echarts
manor的博客
12-09 1030
文章目录可视化面板介绍01-使用技术02- 案例适配方案03-基础设置04-header 布局05-mainbox 主体模块06-公共面板模块 panel07-柱形图 bar 模块(布局)08-中间布局09-Echarts-介绍10-Echarts-体验11-Echarts-基础配置12- 柱状图图表（两大步骤）13-柱状图2定制14-折线图1 人员变化模块制作15-折线图2 播放量模块制作16-饼形图 1年龄分布模块制作17-饼形图2 地区分布模块制作（南丁格尔玫瑰图）18-Echarts-社区介绍19
highcharts-round-edges:带有 Highcharts 的条形图的圆边
07-12
Highcharts 自定义插件 条形图的圆角边缘 这个插件改编自 ，它允许您指定柱形图上的哪些角要圆角，以自定义条形图的角。 需要Highcharts。 问题（改编自原始插件）： 动画不起作用。 为了克服这个问题，在 Renderer...
Highcharts系列翻译说明
Transform
01-29 1848
Highcharts翻译-写在前面的话      2012年的下半年，由于工作的需要，开始使用Highcharts控件，在此首先感谢Highcharts开发人员的辛勤劳动和高尚品格。在使用Highcharts的过程中，才发现，Highcharts的系统官方资料都是英文版的，虽然这些英文对程序设计人员来说并不是很难，但也为我这个英文菜鸟带来了或多或少的不便。Highcharts api的在线编辑示
Highcharts翻译系列五：Lang语言选项
Transform
02-04 2405
Highcharts翻译系列五：Lang语言选项 1.说明 语言对象。语言对象是全局的，而且不能在图表初始化的时候设置。它必须使用Highcharts.setOptions在图表初始化之间设置。 Highcharts.setOptions({       lang:  months:['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'J
Highcharts插件常见问题及解决办法
幸福的使者
07-22 1752
在jsp中使用Highchart的步骤： 第一步：引入highchart必需的js文件 1 2 3 4 5 6 7 8 9 10 11 12 <!-- -- jquery的js要在引入highchart插件的js之前引入 ----> <script src="js/
Highcharts翻译系列之二十：曲线图例子（二）
Transform
04-02 1847
Highcharts翻译系列之二十：曲线图例子（二） 代码 高血压发生率曲线图 .hh { font-weight:lighter; } $(function () { var chart;
Highcharts详细翻译系列一：chart 图表选项篇
Transform
01-31 3253
Highcharts详细翻译系列一：chart 图表选项篇 1.概览    参数 描述 默认值 alignTicks 多轴时最小刻度是否自动计算 true animation 是否启用动画效果 true
Highcharts制作图片表设置线条颜色和粗细
weixin_34204722的博客
06-09 208
Chart：图表区选项 Chart图表区选项用于设置图表区相关属性。 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo 图表放置的容器，一般在html中放置一个DIV，...
pink老师学习之Echarts
qq_45076209的博客
02-23 1417
pink老师学习之Echarts 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术 完成该项目需要具备以下知识： div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件的基准值是
highcharts_on_rails:类固醇的 Highcharts
06-27
$ bundle或者自己安装： $ gem install highcharts_on_rails用法描述图表例子 @chart = HighchartsOnRails::HollowPieChart.new do |chart| chart.title "Browser market share" chart.subtitle "Random data for ...
highcharts-tooltip-delay:在显示Highcharts工具提示之前添加延迟
05-03
Highcharts是一款强大的JavaScript图表库，用于创建各种类型的交互式数据可视化图表。在高图中，工具提示（Tooltip）是图表中一个重要的组成部分，它会在鼠标悬停在特定数据点上时，显示该点的具体信息。"highcharts...
highcharts-assignment-8:Highcharts的课堂作业
04-30
Highcharts和JavaScript（作业8） 此存储库包含您的作业入门文件，包括Highcharts代码。 分叉此仓库（确保您已登录GitHub）。 克隆新的存储库，以便将其存储在硬盘上。 请记住将其保存到用于保存本课程所有项目的...
highcharts-legend-yaxis:该插件允许用户在yAxis区域下方查看图例框（矩形）
05-11
Highcharts是一个用纯JavaScript编写的开源图表库，能够生成包括柱状图、折线图、饼图、散点图等多种图表类型。它具有以下特点： 1. **跨平台兼容**：Highcharts支持多种浏览器，包括最新的桌面和移动设备。 2. **...
Highcharts翻译系列之十九：曲线图例子（1）
Transform
04-02 2268
Highcharts翻译系列之十九：曲线图例子（1）   代码： 重量曲线图 $(function () { var splinechart; $(document).ready(function () { splinechart = new Highcharts
Highcharts的可配置属性总览
Transform
01-29 2015
Highcharts的可配置属性总览     Highcharts可配置选项，在最初的声明chart的时候，初始化。各个属性总览和默认值如下，稍后会系统解释。   var chart = newHighcharts.Chart({ chart: {… alignTicks: true animation:true backgroundColor:#FFFFFF borde
Highcharts翻译系列之二十二：柱状图例子
Transform
04-02 1447
Highcharts翻译系列之二十二：柱状图例子 代码： Highcharts Example $(function () { var chart; $(document).ready(function () { chart = new Highchart
Highcharts直观认识
Transform
01-29 1433
Highcharts直观认识      1.优点综述       Highcharts是用纯Javascript类库制作图表的，由此也带来了如下优点： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费  纯JS，无BS； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
最新发布
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
Highcharts网页图表基础教程：快速掌握图表制作
Highcharts可以从官方网站免费下载，同时提供了多种图表类型，包括折线图、柱状图、饼图等，以满足不同数据展示的需求。教程通过一个简单的实例，让读者快速了解如何创建一个基本的图表，从而理解Highcharts的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值