<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="chart" style="width:400px;height: 200px;"></div>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
//判断数据是否undefined或者小于等于0
function check_data(number,arr1,arr2){
if(number==undefined || number<=0){
arr1.push(null);
arr2.push(null);
}else{
arr1.push(number);
arr2.push(number);
}
}
//去掉书组中的null,arr为要去掉null的数组
function remove_null(arr){
var sss=null;
for(var i=0;i<arr.length;i++){
if(arr[i]==sss){
arr.splice(i, 1);
i=i-1;
}
}
}
/*
* 图表年份分割线
* Arr1当前图表显示的十三个月的年月数组
* Arr2空数组,最终将年份间隔位置放上最大值
* time当前传入的日期例2016162
* max当前y轴坐标的最大值
*/
function arrS(Arr1,Arr2,time,max){
for(var i=0;i<Arr1.length;i++){
if(Arr1[i].slice(0,4)==time.slice(0,4)){
Arr2.push("1000000000");
}else{
Arr2.push("0");
}
}
var zhi;
for(var i=0;i<Arr2.length;i++){
if(Arr2[i]=="1000000000"){
zhi=i;
break;
}
}
for(var i=0;i<Arr2.length;i++){
Arr2.splice(i,1,null);
}
Arr2.splice(zhi,1,max);
/*Arr2.splice(Arr2.length-1,1,1000000000);*/
/*console.log(zuArr);*/
}
var timess = "201706";
$.ajax({
url: "data.json?time="+timess,
dataType: "json",
/*data:reportJson,
contentType: "application/json;charset=utf-8",*/
type: "get",
success: function (data) {
if ('300' === data.statusCode) {
alert(data.message);
return true;
}else if('301' === data.statusCode){
return true;
}
/*var datas={
days_Arr:[],//天数
days_Arrs:[],//天数去null
money_Arr:[],//金额
money_Arrs:[],//金额去null
time_Arr:[],//x轴日期月份01
dataArrYear:[],//日期年2017
zuArr:[],//年份分割线
dataArrs:[]//日期201701
}*/
var days_Arr=[],days_Arrs=[],time_Arr=[],money_Arr=[],money_Arrs=[],dataArrYear=[],zuArr=[],dataArrs=[];
$.each(data.turnDays,function(k,v){
check_data(v.days,days_Arr,days_Arrs);
});
$.each(data.productMoney,function(k,v){
check_data(parseFloat(v.balance/10000),money_Arr,money_Arrs);
time_Arr.push(v.time.slice(4));
dataArrYear.push(v.time.slice(0,4));
dataArrs.push(v.time);
});
//遍历数组money_Arrs,days_Arrs去掉数组中的null
remove_null(money_Arrs);
remove_null(days_Arrs);
/*days_Arr=[8,8,8,8,8,8,8,8,8,8,8,8,8];
days_Arrs=[8,8,8,8,8,8,8,8,8,8,8,8,8];*/
//取出金额中的最大值最小值
var money_max=Math.max.apply(null, money_Arrs);
var money_min=Math.min.apply(null, money_Arrs);
if(money_max>=100000){
money_max=Math.floor(money_max/100000)*100000+100000;
}else if(money_max<100000&&money_max>=10000){
money_max=Math.floor(money_max/10000)*10000+10000;
}else if(money_max<10000&&money_max>=1000){
money_max=Math.floor(money_max/1000)*1000+1000;
}else if(money_max<1000&&money_max>0){
money_max=Math.floor(money_max/100)*100+100;
}else if(money_max==0){
money_max=10000;
}
//取出天数中的最大值days_max_x
var days_max_x=Math.max.apply(null, days_Arrs);
var days_max;
if(days_max_x==0){
days_max=0
}else{
//根据天数中的最大值,计算右侧y轴的最大值days_max
days_max=days_max_x*money_max/money_min;
}
if(days_max==0){
days_max=25;
}else if(days_max>0&&days_max<10){
days_max=Math.ceil(days_max/15+1)*15;
}else if(days_max>=10&&days_max<=30){
days_max=Math.ceil(days_max/30+1)*30;
}else if(days_max>=30&&days_max<=75){
days_max=Math.ceil(days_max/75+1)*75;
}else{
days_max=Math.ceil(days_max/150+1)*150;
}
//设置年份分割线
arrS(dataArrs,zuArr,timess,money_max);
//万元,取最大值最小值和当前值进行显示
var money_ArrMax=Math.max.apply(null,money_Arrs);
var money_ArrMin=Math.min.apply(null,money_Arrs);
var money_ArrMaxInd=money_Arr.indexOf(money_ArrMax);
var money_ArrMinInd=money_Arr.indexOf(money_ArrMin);
var money_Arr_this=money_Arrs[money_Arrs.length-1];
var money_Arr_thisInd=money_Arrs.length-1;
//天数,取最大值最小值和当前值进行显示
var days_ArrMax=Math.max.apply(null,days_Arrs);
var days_ArrMin=Math.min.apply(null,days_Arrs);
var days_ArrMaxInd=days_Arr.indexOf(days_ArrMax);
var days_ArrMinInd=days_Arr.indexOf(days_ArrMin);
var days_Arr_this=days_Arrs[days_Arrs.length-1];
var days_Arr_thisInd=days_Arrs.length-1;
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
//根据电脑屏幕控制图表字体大小
var client_w= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var font,font1,font2,font3,font_l,y_t2,l_y,l_x,x_t_x,x_t_y,st_y,s1_d_y,y2_y;
if(client_w<1200){
font="10px";
font1="10px";
font2="8px";
font3="6px";
font_l="8px";
y_t2=-25;
l_y=-7;
l_x=-12;
x_t_x=140;
x_t_y=-15;
st_y=33;//副标题万元的位置
s1_d_y=-17;//年份的位置
y2_y=-8;//y轴右标题的y
}else if(client_w>1200&&client_w<=1500){
font="12px";
font1="10px";
font2="10px";
font3="8px";
font_l="8px";
y_t2=-28;
l_y=-6;
l_x=0;
x_t_x=190;
x_t_y=-22;
st_y=37;//副标题万元的位置
s1_d_y=-17;//年份的位置
y2_y=-14;//y轴右标题的y
}else if(client_w>1500&&client_w<=1900){
font="14px";
font1="12px";
font2="10px";
font3="8px";
font_l="10px";
y_t2=-28;
l_y=-6;
l_x=0;
x_t_x=226;
x_t_y=-22;
if (Browser.ie === "8.0") {
x_t_x=238;
}
st_y=37;//副标题万元的位置
s1_d_y=-17;//年份的位置
y2_y=-14;//y轴右标题的y
}else if(client_w>1900){
font="18px";
font1="14px";
font2="14px";
font3="14px";
font_l="14px";
y_t2=-34;
l_y=-6;
l_x=0;
x_t_x=245;
x_t_y=-25;
st
折线、双Y轴、不交叉、highcharts、按照日期分割线
需积分: 12 151 浏览量
2017-12-08
13:21:04
上传
评论
收藏 110KB ZIP 举报
折线、双Y轴、不交叉、highcharts、按照日期分割线.zip （5个子文件） 
折线、双Y轴、不交叉、highcharts、按照日期分割线 highcharts 
jquery-1.9.1.min.js 90KB
index.html 18KB highcharts-more.js 25KB data.json 1KB highcharts.js 168KB资源评论
qq_36791779
- 粉丝: 0
- 资源: 3
