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

最新推荐文章于 2021-05-29 06:54:09 发布
最新推荐文章于 2021-05-29 06:54:09 发布
阅读量1.4k 收藏
点赞数
分类专栏： Highchart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiqingli/article/details/8751459
版权

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

代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Highcharts Example</title>
    <script type="text/javascript" src="Lib/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'column',
                        margin: [35, 10, 40, 50],
                        plotBorderWidth: 1,
                        plotBorderColor: '#625f5f',
                        animation: false,
                        style:
                        {
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '12px',
                            color: '#262626'
                        }
                    },
                    colors: [

	                       '#7bd5f3',
	                       '#fbe659',
                             "#fca108",

                            ],
                    title: {
                        text: '柱状图',
                        x: 60,
                        y: 9,
                        style: {
                            // display: 'none',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '20px',
                            fontWeight: 'Bold',
                            color: '#262626'
                        }
                    },
                    subtitle: {
                        style: {
                            display: 'none'
                        }
                    },
                    xAxis: {
                        //lineWidth: 1,
                        // lineColor: '#625f5f',
                        labels:
                        {
                            style: {
                                color: '#262626',
                                fontSize: '12px',
                                marginTop: 5
                            }

                        },
                        categories: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质']
                    },
                    yAxis: {
                        allowDecimals: false,
                        min: 0,
                        max: 100,
                        alternateGridColor: '#f6f6f6',

                        // lineWidth: 1,
                        gridLineWidth: 1,
                        //tickPosition: 'inside',
                        gridLineColor: '#c5c5c5',
                        //offset: -3,
                        //  lineColor: '#625f5f',
                        plotLines: [{
                            value: 30,
                            color: '#439c07',
                            dashStyle: 'solid',
                            width: 2,
                            label: {
                                text: '倾向',
                                align: 'left',
                                x: -25,
                                style: {
                                    color: '#439c07'
                                }
                            }
                        }, {
                            value: 40,
                            color: '#dd0202',
                            dashStyle: 'solid',
                            width: 2,
                            label: {
                                text: '判定',
                                align: 'left',
                                x: -25,
                                style: {
                                    color: '#dd0202'
                                }
                            }
                        }],
                        title: {
                            text: '分数',
                            style: {
                                display: 'none'

                            }
                        },
                        labels: {
                            enabled: false
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        backgroundColor: '#FFFFFF',
                        align: 'right',
                        verticalAlign: 'top',
                        x: 0,
                        y: -10,
                        floating: true,
                        shadow: false,
                        enabled: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '' +
                        this.x + ': ' + this.y + '分';
                        }
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.001,
                            borderWidth: 0,
                            shadow: false,
                             animation: false
                        }
                    },
                    series: [{
                        name: '我的主要体质',

                        data: [{ y: 10, color: 'red', name: '5' }, { y: 23, color: '#7bd5f3', name: '5' }, { y:45, color: '#7bd5f3', name: '5' }, { y: 

70, color: '#fbe659', name: '5' }, { y: 55, color: '#7bd5f3', name: '5' }, { y: 60, color: '#fca108', name: '5' }, { y: 32, color: '#7bd5f3', 

name: '5' }, { y: 65, color: '#7bd5f3', name: '5' }, { y: 24, color: '#7bd5f3', name: '5'}],
                        dataLabels: {
                            enabled: true,
                            rotation: 0,
                            color: '#262626',
                            align: 'center',
                            x: -3,
                            y: 15,
                            formatter: function () {

                                if (this.y != 0) {
                                    return this.y  + "分";
                                }
                            },
                            style: {
                                fontSize: '13px',
                                fontFamily: 'Microsoft YaHei'

                            }
                        }

                    }]
                });
            });

        });
    </script>
</head>
<body>
    <script src="Lib/Highcharts-2.2.5/js/highcharts.js" type="text/javascript"></script>
    <!-- <script src="../../js/modules/exporting.js"></script>-->
    <div id="container" style="width: 800px; height: 475px; margin: 0 auto">
    </div>
</body>
</html>


 

运行效果：

 

自律2019
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Highcharts动态实现柱形图
Vinnies的博客
08-19 4639
1.认识Highcharts         HighCharts 界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。最新版本Highcharts-4.2.3.   特点：           1.兼容性：兼容当今大部分的浏览器，包括Safari、IE和火狐等。           2.图表类型：包括曲线图、区域图、柱
Highcharts--（3）x轴数据过多设置滚动条
热门推荐
lfhwh的专栏
11-04 1万+
var chart = new Highcharts.Chart({     chart: {         renderTo: 'container',         type:'line'     },     xAxis:{         min:0,         max:10     },     //设置滚动条         scrollbar:
android highcharts柱状图实例,android highcharts 柱状图例子
weixin_39820177的博客
05-29 137
android提供achartengine api 只能做简单的，如果是复杂的图表，个人的想法结合highcharts来完成；减小工作量，官方提供的例子也非常丰富。通过android webview来请求数据；public class ZTMainActivity extends Activity {WebView browser;ProgressDialog pd;Handler handler...
android highcharts柱状图实例,Highcharts教程(22) 柱状图例子
weixin_33116629的博客
05-29 248
本节内容：Highcharts教程第二十二节的内容，柱状图的实例代码。例子：复制代码 代码示例:Highcharts 柱状图-www.jquerycn.cn$(function () {var chart;$(document).ready(function () {chart = new Highcharts.Chart({chart: {renderTo: 'container',type: ...
可视化例子(10)——HighCharts三维堆叠柱状图
Ocean111best的博客
02-25 1510
由于工作的需要接触 HighCharts 的使用。做出了个三维堆叠柱状图，得出的效果图如下图所示： 其主要代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...
android highcharts 柱状图例子
angchanghui2104的博客
07-05 100
android提供achartengine api 只能做简单的，如果是复杂的图表，个人的想法结合highcharts来完成；减小工作量，官方提供的例子也非常丰富。 通过android webview来请求数据；public class ZTMainActivity extends Activity { WebView browser; ProgressDialog ...
php 使用highchart生成曲线图,使用Highcharts生成柱状图
weixin_29055699的博客
04-06 557
柱状图广泛应用于数据统计和分析，它是由一系列高度不等的纵向条纹表示数据分布的情况，能够直观的表示数据间的差异。柱状图可以是纵向和横向排列，本文讲解通过Highcharts生成一个年度财经支出统计图和一个男女比例分布图。1、年度财经支出统计图通过以下配置，可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转(标签名称太长的情况)、XY轴均可放大的、去除LOGO信息的统计图表。具体请看代码和注释：va...
highcharts 柱状图
diantan3782的博客
07-18 299
柱状图广泛应用于数据统计和分析，它是由一系列高度不等的纵向条纹表示数据分布的情况，能够直观的表示数据间的差异。柱状图可以是纵向和横向排列，本文讲解通过Highcharts生成一个年度财经支出统计图和一个男女比例分布图。 1、年度财经支出统计图 通过以下配置，可以生成一个柱状图与曲线图共存、双Y轴、X轴标签旋转（标签名称太长的情况）、XY轴均可放大的、去除LOGO信息的统计图表...
highcharts php 折线图,坐标轴 | Highcharts 使用教程
weixin_29942159的博客
03-22 730
笛卡尔图表(普通的二维数据图)都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧(多个y轴时可以是显示在左右两侧)，通过设置chart.inverted = true 可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分图1：图表坐标轴组成部分一、坐标轴组成部分1、坐标轴标题坐标轴标题。默认情况下，x轴为null(也就是没有title)，y轴为'Value'，设置坐标轴标题的代码如...
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
10-20
在本例中，我们将讨论如何使用HighCharts来绘制2D柱状图、折线图和饼图的组合图，以及相关的实现步骤。 首先，为了使用HighCharts，你需要在HTML文档中引入jQuery库（如`jquery-1.7.2.min.js`）和HighCharts库（如`...
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
10-20
在本示例中，我们将深入探讨如何使用jQuery插件HighCharts来创建2D柱状图与折线图的组合，并实现多轴图效果。HighCharts是一个功能强大的JavaScript库，允许开发者轻松地创建交互式图表，适用于网页和移动设备。通过...
柱状图点击修改颜色.zip
08-07
在“柱状图点击修改颜色.zip”这个压缩包中，包含了一个关于如何在Highcharts柱状图上实现点击后改变颜色并恢复其他颜色的解决方案。 在Highcharts的默认设置下，柱状图的颜色通常是静态的，不支持直接通过点击来...
highCharts 柱状图，线型和柱状，仪表
06-11
在HighCharts中，可以通过`Highcharts.chart`函数创建一个柱状图。配置项主要包括`series`（数据系列）、`xAxis`（X轴设置）和`yAxis`（Y轴设置）。例如，`series`中定义每组数据，`xAxis`设置类别标签，`yAxis`则...
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
01-29 1848
Highcharts翻译-写在前面的话      2012年的下半年，由于工作的需要，开始使用Highcharts控件，在此首先感谢Highcharts开发人员的辛勤劳动和高尚品格。在使用Highcharts的过程中，才发现，Highcharts的系统官方资料都是英文版的，虽然这些英文对程序设计人员来说并不是很难，但也为我这个英文菜鸟带来了或多或少的不便。Highcharts api的在线编辑示
Highcharts翻译系列之二十：曲线图例子（二）
Transform
04-02 1847
Highcharts翻译系列之二十：曲线图例子（二） 代码 高血压发生率曲线图 .hh { font-weight:lighter; } $(function () { var chart;
Highcharts翻译系列之二十一：条状图例子
Transform
04-02 1447
Highcharts翻译系列之二十一：条状图例子 代码： 比例统计 .hh { font-weight: bold; } $(function () { var chart; $(doc
highcharts柱状图
最新发布
09-13
你想了解关于 Highcharts 的柱状图吗？Highcharts 是一种基于 JavaScript 的图表库，可以用于创建各种类型的交互式图表，包括柱状图。 使用 Highcharts 创建柱状图相对简单。首先，你需要引入 Highcharts 库的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值