highchart 横轴纵轴数据
1、highchart 横轴为字符串数组,必须加引号;纵轴为数值数组,不能加引号
2、series中的json内容,属性不能加引号
3、chart.height: Number,图表的高度。默认高度是根据容器 div 的高度值计算而来,如果容器没有设置高度值,则是 400px。
4、横轴可以直接通过数组进行赋值,如下doorArr;或foodOptions.xAxis.categories = doorArr;
xAxis: {
categories: doorArr,
title: { text: null }
},
纵轴foodOptions.series[0].data = totalArr;或在option中按照json格式赋值
{chart: {renderTo: 'container',animation: false,type: 'column'}, title: {text:' 销售数据明细'},
xAxis: {categories: [‘熟食','包子','汇总'],title: { text: null }},yAxis: {min: 0,title: {text: '销售额 (元)',align: 'high' },
labels: {overflow: 'justify'}}, credits: {enabled: false},
plotOptions: {
column: {dataLabels: { enabled: true}},
events: {click: function(e) { alert(e.point.category); }}},
series: [{cursor: 'pointer',show: true,animation: true,name: '销售额', dataLabels: {enabled: true }, data: [63.4000,480.0000,543.4]}]});
});
highchart 横轴纵轴数据的更多相关文章
- Excel 绘制图表,如何显示横轴的数据范围
右键点击X坐标轴,然后选中“设置图表区域格式”,然后在“坐标轴选项”--“区域”处设置X轴范围. 备注,这种方式仅使用与第一列时日期时间类型的数据. 应用场景 当,选择有两列数据,第一列为横轴数据,第 ...
- ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图
作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...
- java代码实现highchart与数据库数据结合完整案例分析(一)---饼状图
作者原创:转载请注明出处 在做项目的过程中,经常会用到统计数据,同时会用到highchart或echart进行数据展示,highchart是外国开发的数据统计图插件, echart是我们国家开发的数据 ...
- highchart接收后台数据用法
最近做数据分析的时候使用了highchart这个插件,从后台中接收数据的时候出了一些问题,记录下来免得以后忘了. $(function () { var list = {$weeklist}; var ...
- HighChart学习-更新数据data Series与重绘
一:HighChart介绍 基于JQuery的纯JavaScript的图标库,支持各种图表显示,同时还支持Mootools 与Prototype详细版本支持在这里: JQuery 1.3.2 - 1. ...
- java代码实现highchart与数据库数据结合完整案例分析(二)---折线图
作者原创:未经博主允许不许转载 在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客. 现在分析和展示折线图的绘制和案例分析, 先展示效果图: 与饼状图不同的是,折线图展现更多的数 ...
- Python使用Flask框架,结合Highchart,搭配数据功能模块,加载 HTML 表格数据
参考链接:https://www.highcharts.com.cn/docs/data-modules 1.javascript代码 var chart = Highcharts.chart('co ...
- Python使用Flask框架,结合Highchart,搭配数据功能模块处理csv数据
参考链接:https://www.highcharts.com.cn/docs/data-modules 1.javascript代码 var csv = document.getElementByI ...
- Python使用Flask框架,结合Highchart处理xml数据
1.html代码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
随机推荐
- Linux 文件系统介绍
目录 1.Linux 分区简介 2.文件的类型 3.文件的属性与权限 4.直达底部 一.Linux 分区简介 与 windows 通过 盘符管理各个分区不同,Linux把所有设备和文件都当作文件来管理 ...
- 使用ajax异步上传文件或图片(配合php)
//html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...
- 一本通1645Fibonacci
1645:Fibonacci 时间限制: 1000 ms 内存限制: 524288 KB [题目描述] 原题来自:POJ 3070 我们知道斐波那契数列 F0=0,F1=1,Fn=Fn ...
- Tyvj1038 忠诚 (线段树)
[Tyvj1038]忠诚 线段树 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让财主十分满意.但是 ...
- HGOI20181031 模拟题解
sol:第一题就DP?!然后写了O(n^2) dp再考虑优化!!!(尽量部分分带上!!!) 我写了正确的dp然后优化错了,具体的dp方法是考虑到对于右侧到左侧他是没有后效性的 所以定义f[i]为i及以 ...
- ModelMap对象的 addAttribute,put两个方法区别
这个是 源码中 ModelMap的定义 类 public class ModelMap extends LinkedHashMap<String, Object> 说明 ModelMap是 ...
- LeetCode 4.反转整数
给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注意: ...
- linux basic ------ shell
一般习惯把 shell 脚本语言和 shell 解释器统称为 shell,用 shell 脚本语言编写的程序简称脚本. shell 解释器 是用 c 语言写一个应用程序,它是用户使用 Unix / L ...
- 移动端Web页面问题解决方案
1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显 ...
- Java基础-SSM之Spring MVC入门篇
Java基础-SSM之Spring MVC入门篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spring MVC简介 1>.什么是Spring MVC 答:Sprin ...