HighChat 动态绑定数据（二）
也是对最近几天的折线图搞得烦心，看了好多前辈的文章，也总结了一下。
1.先看后台程序，这是我模拟的一些参数 就是一个字符串。没啥好说的
public ActionResult Index2()
{
string[] key = { "2017-08-01", "2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", "2017-08-09", "2017-08-10" };
double[] V1 = { 4.3, 1.2, 1.3, 1.6, 7.6, 5.9, 9.0, , , };
double[] V2 = { 5.3, 1.9, 1.3, 1.4, 7.6, 0.4, 9.0, , , };
string json = "{\"rows\":[";
for (int i = ; i < key.Count(); i++)
{
json += "{\"atrname\":\"" + key[i] + "\",\"clickvalue\":\"" + V1[i] + "\",\"impvalue\":\"" + V2[i] + "\"},";
}
json = json.TrimEnd(',');
json += "]}";
return Content(json);
}
2.主要是前台的数据绑定
第一种方式：
1.其中头文件中加了 no-data-to-display.src.js 这个文件，表示如果在没有数据的时候会自动显示 暂无数据
lang: { noData: "暂无数据" },
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
}
2.请注意看现在的 series: [{}] 的值是这样的，因为如果是[]，这样就不会有数据显示 用这种方式显示数据的时候
//这种方式必须默认有数据的时候才能显示
oOptions.series[0].name = "第三条";
oOptions.series[0].data = clickvalue;
3.var oSeries = {
// name: "第二条",
// data: clickvalue
//};
//oChart.addSeries(oSeries); 用这种方式 赋值的时候 series: [{}] 这样的时候，虽然显示一条折线图，但是右边会显示一个折线的表示。series:[] 这样就不会显示
用这种方式赋值的时候//oChart = new Highcharts.Chart(oOptions); 要去掉 或者 放到上面执行。
4.第三种方式 series:[] 或者series:[{}]都可以实现
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/charts/highcharts/exporting.js"></script>
<script src="~/charts/highcharts/highcharts.js"></script>
<script src="~/charts/highcharts/no-data-to-display.src.js"></script>
<script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
<script type="text/javascript">
var oChart = null;
var oOptions = {
chart: {
renderTo: 'container', //设置显示的页面块
type: 'line'
},
//图标标题
title: {},
credits: { enabled: false },
tooltip: { shared: true },
lang: { noData: "暂无数据" },
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth:
},
//x轴
xAxis: { title: {} },
//y轴
yAxis: { title: {} },
//数据列
series: []
};
$(document).ready(function () {
oChart = new Highcharts.Chart(oOptions);
requestData();
});
//新的折线图
function requestData() {
oChart.showLoading();
$.ajax({
url: '/Home/Index2',
type: 'POST',
dataType: 'json',
async: false, //同步处理后面才能处理新添加的series
data: null,
success: function (rntData) {
var xatrnames = [];
var clickvalue = [];
var impvalue = [];
for (var i = ; i < rntData.rows.length; i++) {
xatrnames.push([
rntData.rows[i].atrname
]);
clickvalue.push([
parseFloat(rntData.rows[i].clickvalue)
]);
impvalue.push([
parseFloat(rntData.rows[i].impvalue)
]);
}
alert(xatrnames + clickvalue);
oOptions.title.text = "标题";
oOptions.xAxis.title.text = "x轴标题";
oOptions.xAxis.categories = xatrnames;//x轴数据
//这种方式必须默认有数据的时候才能显示
oOptions.series[].name = "第三条";
oOptions.series[].data = clickvalue;
//必须有2条线的时候才会显示
oOptions.series[].name = "第三条";
oOptions.series[].data = clickvalue;
//这种方式为添加，每次只能添加一条
//var oSeries = {
// name: "第二条",
// data: clickvalue
//};
//oChart.addSeries(oSeries);
//此处可以用循环写入也可以的 循环赋值多个可以从0开始
//oOptions.series = new Array();
//oOptions.series[0] = new Object();
//oOptions.series[0].name = "点击";
//oOptions.series[0].data = clickvalue;
//oOptions.series[1] = new Object();
//oOptions.series[1].name = "展示";
//oOptions.series[1].data = impvalue;
//第二种方式的时候要去掉，或者放到上面先执行
//oChart = new Highcharts.Chart(oOptions);
}, error: function (jqXHR, textStatus, errorThrown) {
}
});
oChart.hideLoading();
}
</script>
后面我会把我的demo放上去 希望有错误的地方大家可以指正我，共同进步
下载链接：http://pan.baidu.com/s/1jHYFjE2
HighChat 动态绑定数据（二）的更多相关文章
- HighChat 动态绑定数据记录
最近刚开始做图形操作,纠结了一上午,highchat 动态绑定数据这块一直不知道怎么绑定,后来多次尝试,发现 1.x轴的数据是个数组格式,我从后台传到前台的时候,js中用数组进行处理数据,然后赋值到c ...
- HighChat动态绑定数据 数据后台绑定（四）
后台绑定数据,直接返回json数据 IList<SummaryHour> adHourData = summarybll.FindList(str); List<, , , , , ...
- HighChat动态绑定数据 数据后台绑定（三）
今天看了几位大佬的博客,学到了一些,现在分享一下,也作为以后的参考 不多说看代码 1.后台代码 public ActionResult Ajax2() { ReportData reportData ...
- dev checkedlistbox动态绑定数据
最近在做项目的时候遇到个问题.用checkedlistbox控件绑定数据.在这里稍微总结一下. 其实动态绑定数据有两种方法下面说一下 1.通过数据源 DataTable dt=new DataTabl ...
- eCharts 折线图，动态绑定数据不更新图表的问题，
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- bootstrap selectpicker 通过代码指定选中值 BootStrap selectpicker后台动态绑定数据 selectpicker 获取选中option的属性或者值
bootstrap-select使用 bootstrap selectpicker 通过代码指定选中值 $('#subjectno').selectpicker('val',(row.subjectn ...
- bootstrap select下拉框模糊搜索和动态绑定数据解决方法
此方法适合后台一次性返回所有数据好了废话不多说直接上代码: <!DOCTYPE html><html><head> <title>Bootstrap-s ...
- (转).net控件dropdownlist动态绑定数据
DropDownList控件的使用(数据绑定)(.net学习笔记二)(2006-10-12 07:28:49) 转载 分类:.net学习笔记 一.在页面初始化时候将集合绑定到DropDownLis ...
- .net控件dropdownlist动态绑定数据 ----转
DropDownList控件的使用(数据绑定)(.net学习笔记二) 一.在页面初始化时候将集合绑定到DropDownListpublic void Page_Load(Object src.Even ...
随机推荐
- 【java集合总结】-- ArrayList源码解析
一.前言 要想深入的了解集合就必须要通过分析源码来了解它,那如何来看源码,要看什么东西呢?主要从三个方面: 1.看继承结构 看这个类的继承结构,处于一个什么位置,不需要背记,有个大概的感觉就可以,我自 ...
- E03 【餐厅】Can I book a table for two for this evening,please?
核心句型 Can I book a table for two for this evening,please? 我能预定一张今晚的双人桌吗? What time do you want to hav ...
- shell脚本的输入以及脚本拥有特效地输出
shell脚本的输入以及脚本拥有特效地输出 shell脚本输入之read命令 之前是直接在sh 后加参数 现在是另一种方式 语法:read -参数 -p:给出提示符.默认不支持"\n&quo ...
- djangoORM 修改表结构/字段/外键操作
Django支持修改表结构 把max_length=64 改为60 再执行一遍 python manage.py makemigrations python manage.py migrate 如果是 ...
- 链接doc命令行的mysql的编码问题
好几次用doc命令行链接mysql数据库进行保存注册等内容,一直出错,要么插入数据库的是乱码问题,要么是没插进去,怎么回事? 在修改了代码(接收中文数据)的基础上(即在代码中用utf-8接收数据) 也 ...
- 【Excel】输入单引号
首位输入:输入两个单引号 拼接输入:可以引入输入 举个例子:拼接一个SQL,values都是字符串,需要引号 =IF( OR(A2="",B2="",C2=&q ...
- [LeetCode] 241. Different Ways to Add Parentheses 添加括号的不同方式
Given a string of numbers and operators, return all possible results from computing all the differen ...
- CSP-S考前救急（考试前还是别复习了，事实证明复习了也没考到...
“不要为明天而忧虑,因为明天自有明天的忧虑:一天的难处一天当就够了.” 念念不忘,必有回响. 考试结束前15分钟停止写代码.然后按照以下顺序进行检查: -检查文件名是否写错-检查是否打开文件输入输出 ...
- C++版本 ORM 访问数据库之ODB 的oracle Demo测试(二)
有上篇文章已经说了odb的环境编译, 现在直接拿来给的例子进行数据库的增删改查操作测试 1. ODB访问oracle数据库_ 插入操作(insert) 直接运行上篇编译好的exe文件会出现如下错误 错 ...
- 重启服务器后Docker容器暴露的端口外网突然访问不了!!
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...