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 横轴纵轴数据的更多相关文章

  1. Excel 绘制图表,如何显示横轴的数据范围

    右键点击X坐标轴,然后选中“设置图表区域格式”,然后在“坐标轴选项”--“区域”处设置X轴范围. 备注,这种方式仅使用与第一列时日期时间类型的数据. 应用场景 当,选择有两列数据,第一列为横轴数据,第 ...

  2. ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  3. java代码实现highchart与数据库数据结合完整案例分析(一)---饼状图

    作者原创:转载请注明出处 在做项目的过程中,经常会用到统计数据,同时会用到highchart或echart进行数据展示,highchart是外国开发的数据统计图插件, echart是我们国家开发的数据 ...

  4. highchart接收后台数据用法

    最近做数据分析的时候使用了highchart这个插件,从后台中接收数据的时候出了一些问题,记录下来免得以后忘了. $(function () { var list = {$weeklist}; var ...

  5. HighChart学习-更新数据data Series与重绘

    一:HighChart介绍 基于JQuery的纯JavaScript的图标库,支持各种图表显示,同时还支持Mootools 与Prototype详细版本支持在这里: JQuery 1.3.2 - 1. ...

  6. java代码实现highchart与数据库数据结合完整案例分析(二)---折线图

    作者原创:未经博主允许不许转载 在上一篇的博客中,展示和分析了如何做一个饼状图,有疑问可以参考上一篇博客. 现在分析和展示折线图的绘制和案例分析, 先展示效果图: 与饼状图不同的是,折线图展现更多的数 ...

  7. Python使用Flask框架,结合Highchart,搭配数据功能模块,加载 HTML 表格数据

    参考链接:https://www.highcharts.com.cn/docs/data-modules 1.javascript代码 var chart = Highcharts.chart('co ...

  8. Python使用Flask框架,结合Highchart,搭配数据功能模块处理csv数据

    参考链接:https://www.highcharts.com.cn/docs/data-modules 1.javascript代码 var csv = document.getElementByI ...

  9. Python使用Flask框架,结合Highchart处理xml数据

    1.html代码 <!DOCTYPE html><html lang="en"><head>    <meta charset=" ...

随机推荐

  1. SCRUM站立会议模拟

    项目名称:连连看游戏 小组名称:计信F4 开会时间 :2016年10月11日 20:20~20:40 组长:张政 成员:张金生,武志远,李权 会议流程: 四个人模拟了一次的小组站立会议. 小组成员和组 ...

  2. 【转载】Activiti delete process definition by key

    http://blog.csdn.net/zwk626542417/article/details/46602419 @RequestMapping(value = "deleteProce ...

  3. k8s 实验过程中遇到的两个小问题 端口 和 批量删除Error的pods

    1. 自己kubeadm搭建的一套k8s系统 然后进行做实验 发现了几个问题 jenkins 创建 salves的时候总是有问题.  提示注册不上 然后 我修改了下yaml文件 暴露端口 50000 ...

  4. element-ui upload组建上传 file-list踩过的坑

    昨天修完了一个上传组件删除时,图片删掉了,但是地址仍然在的bug,今天测试告诉我bug没休掉,what !,昨天修完之后我自测了一下,OK的好吗,但是测试给我演示了一下,问题仍然存在!!!我看了一下调 ...

  5. Java之JDBC操作

    下载jar包: mysql-connector-java-5.1.44.jar 导入包: import java.sql.*; 源码如下: /** * 使用JDBC底层实现查询 */ public s ...

  6. 移动端web开发整理

    /* 移动端定义字体的代码 */body { font-family: "Helvetica Neue", Helvetica; } ios端触摸时,会出现一个半透明灰色遮罩 如果 ...

  7. 如何使用js判断视频是否可以成功访问

    日常工作中会出现各个公司网络不互通的情况,视频如果采用不互通的地址也无法播放,下面方法提供了检测视频是否可以播放的解决方案: 1.跨域 var video = document.createEleme ...

  8. 5Java异常处理

    五.异常 异常概念总结:   练习一:异常的体系    问题:    1. 请描述异常的继承体系    2. 请描述你对错误(Error)的理解    3. 请描述你对异常(Expection的理解) ...

  9. SpringMVC返回JSON方案

    SpringMVC已经大行其道.一般的,都是返回JSP视图.如果需要返回JSON格式,我们大都掌握了一些方法. 在ContentNegotiatingViewResolver之前,一般使用XmlVie ...

  10. 【题解】 bzoj3105: [cqoi2013]新Nim游戏 (线性基+贪心)

    bzoj3105,懒得复制 Solution: 首先你要有一个前置技能:如果每堆石子异或和为\(0\),则先手比输 这题我们怎么做呢,因为我们没人要先取掉几堆,为了赢对方一定会使剩下的异或和为\(0\ ...