highcharts和highmaps冲突

Posted 2023-03-15

参考技术A window>>preferences>>general>>content types
在右边的窗口中打开列表,选中"javascript"，在下面的"default encoding"右边的输入框中输入"utf-8"，再点"update"按钮

highcharts

单击打印下载时，显示的下拉框在大部分的ie浏览器中显示的很难看，火狐下正常

highcharts

原因: 上面的下拉框显示很长，是由于hr标签的原因，导致hr的宽度按照 100%进行了显示

解决方法：

在显示highchart图标的jsp页面中，添加hr的样式

<style>

hrheight: 0;margin: 0;padding: 0;width: 0;

</style>

第二步：组装添加显示highchart图表所用的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
显示highchart图标的js代码
$(function ()
//填充数据使用,使用jquery来获取隐藏域的值
var xAxisTimeInfo = $("#xAxisTime").val();
var totalRecordInfo = $(" www.hbbz08.com #totalRecord").val();
var totalRecordHYInfo = $("#totalRecordHY").val();
var totalRecordLJInfo = $("#totalRecordLJ").val();

$('#container').highcharts(
chart:
type: 'spline'
,
title:
text: '每月订单数量统计'
,
subtitle:
text: ''
,
exporting:
filename:"订单统计", //下载显示的文件名称
sourceWidth: 1000, //下载图片的宽度
sourceHeight: 550, //下载图片的高度
//指定下载图片的url，这里使用的本地的java代码，没有使用官网的代码(那//样会受到highchart官网的网络限制,这里的java代码是结合的struts1来//实现的，在java代码解决了导出图片中中文乱码的问题以及下载文件名乱码//的问题,详见java代码中说明) url:'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//这里是一个重点哦,也可以修改exporting.js中对应的url
,
/**
* 去掉图标的右下角HightCharts.com 的图标
*/
credits:
enabled : false, //设置false就不会显示右下角的官网链接
//右下角连接的显示位置
position: align: 'right',x: -8, verticalAlign: 'bottom',y: -390 ,
//右下角链接的地址href:'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?type=1',
text:'区域图表',//右下角连接的名字
style : cursor:'pointer',color:'#909090',fontSize:'20px'
,
xAxis:
categories: eval(xAxisTimeInfo)

,
yAxis:
min: 0,
title:
text: '单位 (个)'

,
//鼠标旁边的提示框的样式
//1. point.y:.0f 提示框中显示的y轴单位的小数点位数
//2. style="width:160px;height:50px" 提示框的宽高
//3. point.key 坐标的x轴的值
tooltip:
headerFormat: '<span style="font-size:20px;">point.key</span><table style="width:160px;height:50px">',
pointFormat: '<tr><td style="color:series.color;padding:0">series.name: </td>' +
'<td style="padding:0"><b>point.y:.0f </b></td></tr>',
footerFormat: '</table>',
shared: true,
usehtml: true

,
plotOptions:
column:
pointPadding: 0.2,
borderWidth: 0

,

//图例的显示名称和数据
//这里使用了eval函数处理一下，使用jquery获取到的隐藏域的值
//否则不会显示
series: [
name: '裸机数量',
data: eval(totalRecordLJInfo)

,
name: '订单总量',
data: eval(totalRecordInfo)

,
name: '合约机数量',
data: eval(totalRecordHYInfo)

]
);
);