highcharts 折线图 和柱状图读取 json值
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Xian.aspx.cs" Inherits="报表测试.Xian" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/highcharts.js"></script> <script src="js/highcharts-more.js"></script> <script src="js/modules/exporting.js"></script>
<script type="text/javascript"> var chart; $(function () {
chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line', backgroundColor: '#f7f8ec', plotBorderWidth: 1, plotBackgroundColor: '#ffffff', shadow: true, borderRadius: 10 , plotShadow: true }, exporting: { enabled: false }, title: { text: '盐城市信访趋势', x: -20 }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, series: [] }); $.ajax({ url: "Handler2.ashx", cache: false }).success(function (data) { for (i = 0; i < data.length; i++) chart.addSeries(data[i]); }); }) </script> </head> <body> <form id="form1" runat="server"> <div id="container" style="width: 100%; height: 200px; margin: 0 auto"></div> </form> </body> </html>
转载于:https://www.cnblogs.com/wangchaofly/p/3419156.html
highcharts 折线图 和柱状图读取 json值相关推荐
- python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
- python导入数据画折线图_Python读取Excel表格,并同时画折线图和柱状图的方法
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
- 用python读取excel数据、并作图_Python读取Excel表格,并同时画折线图和柱状图的方法...
今日给大家分享一个Python读取Excel表格,同时采用表格中的数值画图柱状图和折线图,这里只需要几行代码便可以实. 首先我们需要安装一个Excel操作的库xlrd,这个很简单,在安装Python后 ...
- MATLAB | 绘图复刻(二) | 折线图+误差棒+柱状图+散点抖动+灰色背景+图片叠加
看到gzh R语言ggplot2科研绘图发布了一篇绘图复刻类文章,复刻了: Nature(IF=49.962)文章(Gut microbiota modulates weight gain in mi ...
- JAVA中柱状图和折线图组合,分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式...
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要 引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Androi ...
- Matplotlib基础02：散点图、折线图与柱状图
Matplotlib基础02:散点图.折线图与柱状图 散点图 散点图Scatter: 是数据点在直角坐标系中的分布图,可以让我们对数据分析规律,得到数据变化的趋势,进而进行数据分组. API:scat ...
- 分组折线图、柱状图实现（多条折线图、柱状图同时显示）实现方式
使用MPAndroidChartLibery实现分组折线图和柱状图. 一.实现步骤: 1.同样需要 引入mpandroidchartlibrary-2-1-6.jar :下载地址及介绍见Android ...
- Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入 三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
- ECharts入门——折线图与柱状图
为第一次使用ECharts的小伙伴提供参考,废话不对说,直接上代码 这里主要对两个官网案例进行讲解: https://echarts.apache.org/examples/en/editor.htm ...
最新文章
- 大数据能力提升项目｜ 学生成果展系列之三
- jquery实现多行文字图片滚动效果
- 数据持久化 技术比较
- Oracle面试过程中常见的二十个问题
- 装箱---一个工厂制造的产品形状都是长方体，它们的高度都是 h，长和宽都相等，一共有六个型号，他们的长宽分别为 1*1, 2*2, 3*3, 4*4, 5*5, 6*6.
- android ota更新app,企业 OTA 更新 | Android 开源项目 | Android Open Source Project
- 管理项目的问题跟踪器的提示
- python编程100例-python100例，python经典例题
- 自学硬件真的可行吗？单片机原理知识点之存储器结构的理解(1)
- Fiddler拦截并修改移动端请求
- MySQL主从复制--mysql-proxy实现MySQL-5.6读写分离
- 企业微信怎么填写服务器,勤哲Excel服务器软件做企业微信管理系统
- 虚拟机文件上传至dsm服务器,没NAS也能体验群晖：VMware虚拟机安装DSM详细安装步骤...
- python模拟人工滑动_pyppeteer 模拟人工滑动验证（一）
- sonarqube+scanner代码质量检查
- 使用IMU与轮速计进行单线激光雷达的运动畸变校正
- 小D的一串数字（简单ＤＰ）
- k8s中Pod域名解析失败
- 1046 mysql_mysql 1046 错误解决实例_MySQL
- squeeze的意义