HighCharts 图表高度动态调整

前言

  在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x、y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也无法达到用户的要求。

相关资源

  示例代码下载

  

实现

  C#通过SQL语句得到统计结果,使用DataTable来存放数据,则数据格式为

x    y1    y2    y3    y4
0 10 20 30 40
1 20 20 40 30
2 50 50 50 50
3 40 50 30 20

  而实现图表的JS代码段如下:

        <script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
'thebulletin.metapress.com</a>'
},
xAxis: {
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function() {
return this.value / 1000 +'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null , null , null ,null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
});
}); </script>

  因此,我的想法则是,将DataTable内的数据,转换成以上脚本,直接抛给客户端,其次还需要告知客户端X轴和Y轴的数量,便于客户端根据实际情况调整div的高度或宽度。具体的实现如下:

using System;
using System.Collections.Generic;
using System.Data;
using System.Text; namespace Chen.Common
{
public class HighCharts
{
public string title = string.Empty;
public string subtitle = string.Empty;
public bool showY = false;
public string type = string.Empty; private string xAxis = string.Empty;
private string yAxis = string.Empty;
private string series = string.Empty;
private int xLen = 0;
private int yLen = 0; public string GetChart(DataTable dt)
{
//记录Y轴数据
var arrYData = new string[dt.Columns.Count - 1];
//Y轴数据模板
var tem = @"{name: '{0}',data: [{1}]}";
for (var i = 0; i < dt.Columns.Count; i++)
{
var arr = new string[dt.Rows.Count];
for (var j = 0; j < dt.Rows.Count; j++)
{
//将空数据转换为0
var value = dt.Rows[j][i].ToString();
if (string.IsNullOrEmpty(value))
{
value = "0";
}
arr[j] = value;
}
if (i > 0)
{
arrYData[i - 1] = tem.Replace("{0}", dt.Columns[i].ColumnName)
.Replace("{1}", string.Join(",", arr));
}
else
xAxis = "'" + string.Join("','", arr) + "'";
}
series = string.Join(",", arrYData);
//记录x轴和y轴的长度
xLen = dt.Rows.Count;
yLen = dt.Columns.Count - 1;
return GetChart();
} private string GetChart()
{
var tem = @"<script type='text/javascript'> var chart = new Highcharts.Chart({chart: {renderTo: 'container',type: '#type'},title: {text: '#title'},subtitle: {text: '#subtitle'},xAxis: {categories: [#xAxis]},yAxis: {min: 0,title: {text: '#yAxis'}},legend: {backgroundColor: '#FFFFFF',reversed: true},tooltip: {formatter: function() {return ''+this.x +': '+ this.y +' 条';}},plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},series: [#series]});</script>";
tem = tem.Replace("#title", title)
.Replace("#series", series)
.Replace("#subtitle", subtitle)
.Replace("#xAxis", xAxis)
.Replace("#yAxis", yAxis)
.Replace("#showY", showY.ToString().ToLower())
.Replace("#type", type);
var retStr = new StringBuilder("{");
retStr.AppendFormat("\"x\":{0},\"y\":{1},\"chart\":\"", xLen, yLen);
retStr.Append(tem.ToString());
retStr.Append("\"}");
return retStr.ToString().Replace("\n", "");
}
}
}

  

  基本上算是满足了期望值。在我看来,图表能自动调节容器的高度或宽度,官方应该提供一个示例或者解决方案,否则在容器一定的情况下,图表自定义容器,则很有可能将图表挤压的看起来不舒服。不知道是不是我没有找到合适的解决方案,如果有人知道,期待你留言告知,谢谢!

 

HighCharts 图表高度动态调整的更多相关文章

  1. 关于Highcharts图表组件动态修改属性的方法(API)总结之Series

    Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...

  2. 让tableView的高度等于contentSize的高度、动态调整tableView的高度、tableView的高度自适应布局

    文章概要: 1.简介下,tableView中的内容如何高度自适应的布局 2.如何做到让tableView的高度动态调整 还是看图作文吧- 首先,tableView的高度就是用户能够看见里面更大世界的那 ...

  3. iOS学习之路十三(动态调整UITableViewCell的高度)

    大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的.在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableVie ...

  4. Android - 动态调整ListView高度

    布局中,如果设计ListView的高度为包裹内容,那么ListView的高度是随着它的子条目的数量的变化而改变的, 这就可能会导致ListView下面的一些控件的位置也会随着ListView的高度的变 ...

  5. [转] iOS TableViewCell 动态调整高度

    原文: http://blog.csdn.net/crayondeng/article/details/8899577 最近遇到了一个cell高度变化的问题,在找解决办法的时候,参考了这篇文章,觉得不 ...

  6. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  7. 动态调整UITableViewCell高度的实现方法

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...

  8. 转:Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  9. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

随机推荐

  1. 为WebBrowser的WEB页的Document注册事件的问题

    原文:为WebBrowser的WEB页的Document注册事件的问题 当使用WebBrowser,并对其装载的Web页建立Document的事件后,WebBrowser里的页面元素都变得难于操作了, ...

  2. NYOJ 14 场地安排(它可以被视为一个经典问题)

    会场安排问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 学校的小礼堂每天都会有很多活动.有时间这些活动的计划时间会发生冲突,须要选择出一些活动进行举办.小刘的工 ...

  3. dd命令简单易用,例如

    dd命令简单易用,例如 bs单位,count为写入的范围区间,例如以下举例: 例:使用dd清除vote disk和ocr(裸设备)  $dd if=/dev/zero of=/dev/rrac_ocr ...

  4. Ubuntu10.04中间Leach协议一键安装

    半天后,尝试,引用网络上的零散资源,成品博客Leach协议ubuntu10.04在安装(12.04也可以在右侧安装,然而,实施效果的不,求解决~~),并制作了补丁. 一个关键的安装步骤如下面: 1.在 ...

  5. 让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式

    让低版本的IE浏览器 强制渲染为IE8 或者 以上 浏览器模式 那么就要用下面的方法:让网页兼容ie9 复制代码 代码如下: <!–[if lte IE 8]> <meta http ...

  6. HBuilder js 自定义代码块

    =begin 本文档是HBuilder预置的js代码块的文件.注意不要把其他语言的设置放到js里来. 如果用户修改此文档,HBuilder升级后会覆盖用户的修改,建议进入菜单 工具→扩展代码块 扩展相 ...

  7. leetcode第40题--First Missing Positive

    题目: Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2 ...

  8. SQLite数据库查看工具(免费)

    1. SQLite Administrator http://sqliteadmin.orbmu2k.de/ iteSpy 2.  SQLiteSpy   http://www.yunqa.de/de ...

  9. SQLServer 分组查询相邻两条记录的时间差

    原文:SQLServer 分组查询相邻两条记录的时间差 首先,我们通过数据库中表的两条记录来引出问题,如下图 以上为一个记录操作记录的表数据.OrderID为自增长列,后面依次为操作类型,操作时间,操 ...

  10. INSTEAD OF触发器

    Oracle触发器5(INSTEAD OF触发器) 前提:对于简单的视图,可以直接进行DML操作,但是对于复杂视图,不允许直接执行DML操作,当视图符合以下任何一种情况都不可以: 具有集合操作符(UN ...