Highcharts - Bar Chart

1. 条形图(Bar Chart)需要的数据格式类型如下:

["Luke Skywalker", "Darth Vader", "Yoda", "Princess Leia"]
[2, 4, 1, 1]

2. Bar Chart代码示例:

$(function () {
    $(‘#container‘).highcharts({
        chart: {
            type: ‘bar‘
        },
        xAxis: {
            categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        yAxis:{
            min: 0,
            title: {
                text: ‘Sales‘
            },
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });

    // the button action
    $(‘#button‘).click(function () {
        var selectedPoints = $(‘#container‘).highcharts().getSelectedPoints();
        alert(‘You selected ‘ + selectedPoints.length + ‘ points‘);
    });
});

效果图:

3. 柱状图(Column Chart)与条形图(Bar Chart)的区别是Chart的type属性不同,一个是column,一个是bar,但使用的数据以及格式设置都一样;将条目2中的Chart的type属性改为column,就可以得到如下效果:

4. 如果需要在同一个category中显示不同状态的结果(StackedBar),数据格式就需要做相应修改:

["Luke Skywalker", "Princess Leia", "Yoda", "Darth Vader"]
[{"Completed", [1, 0, 0, 1]},{"Active", [1, 1, 1, 2]},{"Pipeline", [0, 0, 0, 1]}]

5.

时间: 2024-08-06 23:59:39

Highcharts - Bar Chart的相关文章

转 HighCharts笔记之: Bar Chart

最近需要做一些Web图标,研究了几个开源的第三方工具后,最后决定使用HighCharts开发: Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前HighCharts支持 的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,

Relative-Frequency|frequency|pie chart |bar chart

2.2Organizing Qualitative Data The number of times a particular distinct value occurs is called its frequency (or count) Relative-Frequency Distribution:百分比 Note: Relative-frequency distributions are better than frequency distributions for comparing

[Elasticsearch] 聚合 - 创建条形图(Bar Chart)

创建条形图(Building Bar Charts) 聚合的一个令人激动的性质是它能够很容易地被转换为图表和图形.在本章中,我们会使用前面的样本数据集来创建出各种分析案例.我们也会展示聚合能够支持的种类. 柱状图桶(Histogram Bucket)非常有用.柱状图在本质上就是条形图,如果你创建过一份报告或者分析面板(Analytics Dashboard),毫无疑问其中会有一些条形图.柱状图通过指定一个间隔(Interval)来工作.如果我们使用柱状图来表示销售价格,你或许会指定一个值为200

plot bar chart using python

Example import matplotlib.pyplot as plt import plotly.plotly as py # Learn about API authentication here: https://plot.ly/python/getting-started # Find your api_key here: https://plot.ly/settings/api y = [3, 10, 7, 5, 3, 4.5, 6, 8.1] N = len(y) x = r

【HighCharts系列教程】三、图表属性——chart

一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置chart属性,你可以轻松改变你的图表的样式.外观. 二.chart属性详解 Chart常用属性如下表 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo

Highcharts使用指南

http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html 摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. 目录 前言(Preface) 安装(Installation) 如何设置参数(How to set up the options) 预处理参数(Preprocess

转:Highcharts图表控件的使用

摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表. 目录 前言(Preface) 安装(Installation) 如何设置参数(How to set up the options) 预处理参数(Preprocess the options) 活动图(Live charts) 转:http://www.cnblogs.com/liuhaorain

highcharts一点理解

最近使用到图表, Echarts,Highcharts,这2大图表还是非常优秀的图表库,在这里我就简单的讲下Highcharts图表的使用和理解. 博主第一次接触的图表就是Highcharts图表,很快被它吸引到了, 因为样例很多,还很漂亮,使用也方便.Highcharts是一个纯JS编写的一个图表库,兼容性强,效率高,而且还是免费的. https://www.hcharts.cn/download highcharts的下载地址,中文的. https://www.hcharts.cn/docs

Highcharts 用法

一.前言(Preface) Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock. Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表.目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型. Highstock可以为您方便地建立股票或一般的时间轴图表.它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等. 如果想要了解更多Highcharts的信息,可以