您的位置：首页 > 其它

Highcharts 的使用（各种统计图）（难点：绑定数据）

2017-08-02 20:46 399 查看

Hello，EveryBody。

今天搞了搞Highcharts 的柱状图，

最大的难点就是绑定数据的时候。遇到了很多困难。也试了非常多的方法去绑定数据。也在网上搜索了好多。查到的几乎都没有什么帮助。所以写下了这篇博客，来给初次使用Highcharts 和我一样正在头疼的的小白一点点帮助。嘿嘿。

下面呢就开始我们今天的主要内容了。

1.我们先打开官方下载的文件包

打开 index.htm 页面里面有非常多的统计图。我是用的是3D charts 中的 3D column 也就是 3D的柱状图。选择一个后会有非常棒的效果。我们查看页面的源代码。全部复制到项目中。将js包的路径改一改。弄成自己项目中Highcharts js包的路径。然后运行看下效果。

2.修改代码

我用的是vs2017写的。语言是 C#

框架是 ASP.Net MVC

@using System.Collections

@{
ViewBag.Title = "Index";
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<style type="text/css">
/*这里是设置画布和 拖拉块*/
#container, #sliders {
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
#container {
height: 400px;
}
</style>
</head>
<body>
<!--这里是js包-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highcharts.js"></script>
<script src="../../code/highcharts-3d.js"></script>
<script src="../../code/modules/exporting.js"></script>

<!--这里可以理解为  画布-->
<div id="container"></div>

<!--这里是几个控制拖动块-->
<div id="sliders">
<table>
<tr>
<td>Alpha Angle</td>
<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
</tr>
<tr>
<td>Beta Angle</td>
<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
</tr>
<tr>
<td>Depth</td>
<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
</tr>
</table>
</div>

@{//ASP.Net的前台写法
//接到MVC控制器中的ViewBag.name
//（格式是 ：  yuwen，shuxue，yinyu  ）
var name = ViewBag.name;
//接到MVC控制器中的ViewBag.chenji
//（格式是 ：  1，2，3，4，5，6  ）
var chenji = ViewBag.chenji;
}

<script type="text/javascript">
//这里是js
var name = "@name";//新建一个 name变量存柱子的名称
var chenji = "@chenji";//新建一个 name变量存柱子的数值
var nameArry = name.split(',');
//因为 柱子名称需要的数据格式是数组，
//所以我们将原来的字符串分割，就变成了数组了。
//我们就可以直接给统计图赋值了。

//下面是  统计图的主体js代码了。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',//这里是指定 画布id的地方
type: 'column',//这里是统计图的类型
options3d: {
enabled: true,//这里是统计图的3D开关
//下面的几个就是设置3D的角度之类的
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
//logo网址
//这里是设置的 logo的链接。
//默认是有一个官方网址的，这里写出来。
//然后弄成空的。就可以去掉那个logo网址了。
credits: {
text: '',
href: ''
},
//标题
title: {
text: '3班所有人的平均成绩'
},
//副标题
subtitle: {
text: ''
},
//x轴
xAxis: {
title: {
text: '科目'
},
//柱子的名称
categories: eval(nameArry)
//这里我们将事先准备好的 柱子名称数组 放入.
//我们的柱子下方就有名称了。这里必须用eval（）；
},
//y轴
yAxis: {
title: {
text: '分数'
}
},
plotOptions: {
column: {
//柱子的厚度
depth: 80,
//柱子上面的  数值
dataLabels: {
enabled: true,//这里是开启 每个柱子上方的 数值的开关
style: {
color: 'red'//数值字体颜色
}
}
}
},
//柱子的高度。（数据）
series: [{data: eval("[" + chenji + "]")}]
//这个data后面  可以写 固定的数字。也可以写json ，
//json 可以同时显示出柱子名称(name)，柱子颜色，和值(y)
//这里按照这个写法， 必须用eval（）；
//eval()只有一个参数。如果传入的参数不是字符串，它直接返回这个函数。
//如果参数是字符串，它会把字符串当成JavaScript代码进行编译，
//如果编译失败者抛出一个语法错误异常。
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}

$('#sliders input').on('input change', function () {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});

showValues();

</script>
</body>
</html>

这个是我的 MVC控制器的代码（C#语言）

using System;
using System.Web.Mvc;

namespace day1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
//两个string，用于接收 名称和数值
string chenji = String.Empty;
string name = String.Empty;
//这里是从数据库查询到的数据。
//（由于是个demo ，数据访问这边的层级写的简单了点）
var dataList = Dal.ShowDay1s();
//循环数据 取出chenji ，并用逗号分割
for (int i = 0; i <dataList.Count ; i++)
{
chenji += dataList[i].chenji;
if (i != dataList.Count - 1)
{
chenji += ",";
}
}
//取出name
for (int i = 0; i < dataList.Count; i++)
{
name += dataList[i].Name;

if (i != dataList.Count - 1)
{
name += ",";

}
}
//将两个string 传到前台
ViewBag.chenji= chenji;
ViewBag.name = name;
return View();
}
}
}

3.大功告成。

用了好多种方式最后这种方法可以实现。 ajax 也用了。不过感觉ajax在统计图之后执行的所以他的值根本不能生效。还用了动态赋值。可是还是没有用。我们将数值写死，可以成功显示，像这种不确定的数量和值。我试了试没有成功，有兴趣的朋友也可以研究一下。研究出来记得分享给我哟。。嘻嘻。我是个小白。求照顾，求关爱。（比心心）

这个柱状图用法就是这么多了，其他类型的图。也是大同小异。网上也有一些每个方法的属性和默认值格式之类的word文档。大家可以下载一下。就可以扩展出更多的功能了。嘿嘿。。

“`

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Highcharts 的使用（各种统计图）（难点：绑定数据）

Hello，EveryBody。

1.我们先打开 官方下载的 文件包

2.修改代码

1.我们先打开官方下载的文件包