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. Android 进程回收

    1.Android 进程回收策略 众所周知,Android是基于Linux系统的.在Android进程回收策略中,Android进程与Linux进程根据OOM_ADJ阈值进行区分: OOM_ADJ & ...

  2. org.springframework.data.redis.cache.RedisCacheManager

    org.springframework.data.redis.cache.RedisCacheManager

  3. zookeeper - java操作

    ZKUtils.java package test; import java.io.IOException; import java.util.concurrent.CountDownLatch; i ...

  4. BASE_DIR 拼接文件路径

    # C:/Disk_D/pycharm_stu/macboy/blog/views/tt.py 当前文件绝对路径 BASE_DIR = os.path.dirname(os.path.dirname( ...

  5. 在虚拟机中安装ubuntu16.04后不能全屏显示

    一.在终端输入:xrandr 二.输入:xrandr -s 1920x1440 参考网站:https://blog.csdn.net/qq_33202928/article/details/75021 ...

  6. ubuntu14.04 忘记了登录密码和root密码

    由于很久没用自己的ubuntu了,发现刚想用时却忘记了密码,搞了半天终于搞好了,真的.... 在此记录一下自己的新密码:登录密码:1234567:ROOT密码:1234567 下面是整理网上的教程,亲 ...

  7. LeetCode题解之To Lower Case

    1.题目描述 2.分析 遍历字符串,使用C++ 的 标准库函数 isalpha() 判断字符是否为 字母,然后对其做 tolower() . 3.代码 string toLowerCase(strin ...

  8. 如何将同一 VNET 下的虚拟机从经典部署模型迁移到 Azure Resource Manager

    本文内容 适用场景 解决方案 适用场景 用户拥有多个云服务但是在同一个 VNET 下,希望将这些虚拟机从经典部署模型(以下简称:ASM)迁移到 Azure Resource Manager(以下简称: ...

  9. Windows 7系统启动MongoDB失败解决办法?

    问题现象: 1.在配置Python环境安装MongoDB时发现在“服务”里面手动启动失败,报错如下: 2.在cmd里面也无法启动,注意这里要以管理员身份启动cmd哦 问题解决: 1.需要先在bin下执 ...

  10. ORACLE闪回机制分析与研究应用

    1.查看数据库归档和闪回状态,及环境准备SQL> archive log list;SQL> select flashback_on from v$database;关闭数据库,启动归档和 ...