var cate = ['Green', 'Pink'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
legend: {
enable: true
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
groupPadding: cate.length < 4 ? 0.35 : 0.15
}
},
series: [{
name: "Green",
data: [{
name: 'Green',
color: '#00FF00',
y: 1
}]
}, {
name: "Pink",
data: [{
name: 'Pink',
color: '#FF00FF',
y: 5
}]
}]
});

效果图:

highcharts柱状图实现legend和数据列一一对应效果的更多相关文章

  1. highcharts柱状图和饼图的数据填充

    1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...

  2. highcharts 柱状图 动态加载

    highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getCo ...

  3. Highcharts下载与使用_数据报表图

    Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在Web ...

  4. c# datagridview与DataSet绑定, 列与数据库表里面的列一一对应

    参考代码1: 自己模拟出数据,并分别对dataGridView赋值. using System; using System.Collections.Generic; using System.Comp ...

  5. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  6. mysql数据库导出模型到powerdesigner,PDM图形窗口中显示数据列的中文注释

    1,mysql数据库导出模型到powerdesigner 2,CRL+Shift+X 3,复制以下内容,执行 '******************************************** ...

  7. 如何正确选择MySQL数据列类型

    MySQL数据列类型选择是在我们设计表的时候经常会遇到的问题,下面就教您如何正确选择MySQL数据列类型,供您参考学习. 选择正确的数据列类型能大大提高数据库的性能和使数据库具有高扩展性.在选择MyS ...

  8. Flexigrid自定义显示数据列

    近期在搞ExtJs,发现ExJs的Grid相当的强大,后来又搞Jquery时,就对原来的表格不怎么满意了,于是,花了点时间,从网上找了个Grid插件,这个插件功能是比较强大,什么行排序.筛选.分页都有 ...

  9. 只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果

    只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...

随机推荐

  1. flask-login的使用3

    # coding=utf-8 import flask app = flask.Flask(__name__) app.secret_key = 'super secret string' impor ...

  2. vue父与子通信

    个人理解并整理如下 一.父传子 prop传参 父组件传递参数<x-scoll :class="red"></x-scoll> 子组件props:[" ...

  3. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  4. 解决ubuntu使用命令sudo apt -get install 安装东西时出现"E: Sub-process /usr/bin/dpkg returned an error code (1) "的错误

    问题描述: 今天在使用命令 "sudo apt-get install python3-pip"安装时,总是出现如下图这样的错误,开始以为是以为自己python版本的问题,后来发现 ...

  5. CentOS7系列--5.2CentOS7中配置和管理Docker

    CentOS7配置和管理Docker Docker是操作系统级别的虚拟化工具,它能自动化布署在容器中的应用 1. 安装Docker 1.1. 安装Docker相关软件 [root@server1 ~] ...

  6. VSCode环境

    PythonPython for VSCode Language Support for Java(TM) by Red HatJava Language SupportJava DebuggerJa ...

  7. linux 根据进程名杀死进程 -kill进程名

    前两天一个老师给我出了一个linux操作上的问题,现在知道进程名怎样杀死这个进程.或许很多人都会和我一样说用 #pkill 进程名 或是 #killall 进程名 的确这个两个命令都能做到这些,而且我 ...

  8. 星级评分进度条(RatingBar)

    星级评分进度条(RatingBar):(主要用于评价等方面) 常用的xml属性; android:isIndicator:RatingBar是否是一个指示器(用户无法进行更改) android:num ...

  9. lodop 二维码内容多少

    QRCode最多能放181个汉字:LODOP.ADD_PRINT_BARCODE(248,6,60,60,"QRCode","一二三四五六七八九十二二三四五六七八九十三二 ...

  10. 2java.lang.NoClassDefFoundError异常

    1.错误信息 2.错误分析: JVM读到程序的第三行,会在当前路径 "D:\java" 下寻找com.yangquan.aolun这个包路径下的Cat类,但当前路径下根本就没有co ...