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.大功告成。
Highcharts 的使用（各种统计图）（难点：绑定数据）的更多相关文章
- 潜移默化学会WPF（难点控件treeview）--改造TreeView（CheckBox多选择版本），递归绑定数据
原文:潜移默化学会WPF(难点控件treeview)--改造TreeView(CheckBox多选择版本),递归绑定数据 目前自己对treeview的感慨很多 今天先讲 面对这种 表结构的数据 的其中 ...
- Android之ListView性能优化——一行代码绑定数据——万能适配器
如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 【WPF】绑定数据
WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- knockoutjs中使用mapping插件绑定数据列表
使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的 ...
- Highcharts使用简例 + 异步动态读取数据
第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src= ...
- csharp: 用Enterprise Library对象实体绑定数据
Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- WebDataTree 使用XML做数据源绑定数据
英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...
随机推荐
- C#使用任务并行库(TPL)
TPL(Task Parallel Library) 任务并行库 (TPL) 是 System.Threading和 System.Threading.Tasks 命名空间中的一组公共类型和 API. ...
- SD-定义定价用途的条件表(Condition Table)
https://www.fenginfo.com/815.html 条件表(Condition Table)是SAP条件技术体系中最基础的数据源,它们是一群特定的数据表,表名是以特定字母开头 + 三位 ...
- 表格分页——tablePagination
背景:表格是最为通用的展示方式,为了展示的统一性,以及分页组件的重用,这里写一个分页组件,供比较多或者较少数据2种表格进行分页展示. 分页组件: <template> <el-pag ...
- Linux命令——yum
翻译自:20 Linux YUM (Yellowdog Updater, Modified) Commands for Package Management 前言 本篇文章将介绍如何使用RedHat开 ...
- ubuntu安装anaconda3+tensorflow(cpu)+pycharm(windows几乎一样)
网上乱七八糟有的都是别人怎么写自己也怎么写,其实很简单. 首先是anaconda3的安装: 直接上官网:https://www.anaconda.com/download/ 下载下来之后进入文件所在目 ...
- 2016年第六届蓝桥杯C/C++程序设计本科B组决赛 ——一步之遥(填空题题)
一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里.矿车停在平直的废弃的轨道上.他的面前是两个按钮,分别写着“F”和“B”. 小明突然记起来,这两个按钮可以控制矿车在轨道上前进和后退.按F,会 ...
- 大数据之路week07--day04 （Linux 中查看文件内容的关键字处）
Linux如何对文件内容中的关键字进行查找 如果是用vi打开文件后,在命令行下输入“/关键字” 如果是在没有打开文件的前提就用"cat 文件名 | grep "关键字" ...
- 《The One!》团队作业4：基于原型的团队项目需求调研与分析
项目 内容 作业所属课程 所属课程 作业要求 作业要求 团队名称 < The One !> 作业学习目标 (1)体验以原型设计为基础的团队软件项目需求获取技巧与方法.(2)学习利用UML模 ...
- TeX Live安装指南
若要安装 TeXLive ,推荐下载 TeXLive 的 ISO 镜像,因为在线安装下载过程会很慢.如果网速快也可以在线安装.下载地址:http://mirror.ctan.org/systems/t ...
- Selenium常用API的使用java语言之8-模拟鼠标操作
通过前面例子了解到,可以使用click()来模拟鼠标的单击操作,现在的Web产品中提供了更丰富的鼠标交互方式, 例如鼠标右击.双击.悬停.甚至是鼠标拖动等功能.在WebDriver中,将这些关于鼠标操 ...