共计 4524 个字符，预计需要花费 12 分钟才能阅读完成。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、HighCharts 是什么？
- 二、使用步骤
-
- 1. 引入库
- 2. 前端代码
- 3. 展现结果
- 4. 后台自动截图
- 总结
前言
提示：这里可以添加本文要记录的大概内容：
前段时间公司要统计各个站的 OEE 机台的使用率，在网页上前端上展现 OEE 图表，难点在与如何将这些数据转成合理的数据展现出来
提示：以下是本篇文章正文内容，下面案例可供参考
一、HighCharts 是什么？
1、HighCharts 是网页报表工具，开发语言是 Javascript
2、HighCharts 是一个简单易用、美观、跨平台、跨浏览器的，兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
3、HighCharts 支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。
二、使用步骤
1. 引入库
代码如下（示例）：
1、引入 Jquery(HighCharts 是基于 Jquery 框架开发的 )
2、引入 HighCharts.js
3、引入 exporting.js（导出功能）2. 前端代码
代码如下（示例）：
script type="text/javascript">
var operData = [];
$(document).ready(function () {
var options = {
chart: {
type: 'column',
events: {
drilldown: function (e) {
}
}
},
colors: ['#00FFFF', '#0066FF', '#FF0000', '#990033', '#FFC000', '#FF0000', '#8d4653', '#8085e9', '#f15c80', '#e4d354', '#8085e8'],
title: {
text: '各工序的 OEE'
},
subtitle: {
text: '点击可查看具体的版本数据，数据来源 : a href="#">/a>.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'OEE'
},
tickPositions: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 1,
borderColor: "#FFFFFF",
borderRadius: 2,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
},
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function (e) {
if (e.point.name != null) {
var type = $("#").val();
var year = $("#").val();
var monthWeekly = $("#").val();
var day = $("#").val();
var depart = $("#").val();
var ndate = "";
if (type == "Daily") {
ndate = year + monthWeekly + day;
} else if (type == "Weekly") {
ndate = year + monthWeekly
} else if (type == "Monthly") {
ndate = year + monthWeekly
}
var title = type + "_" + ndate + "_" + depart + "_EquipList";
$("#").val(e.point.name);
$("#equipid").val("");
$("#searchInfo").show();
InitGird(title, type, ndate, depart, e.point.name);
}
}
}
}
}
},
tooltip: {
useHTML: true,
style: {
padding: 0,
pointerEvents: 'auto'
},
shared: false,
formatter: function () {
var type = $("#").val();
var year = $("#").val();
var monthWeekly = $("#").val();
var day = $("#").val();
var depart = $("#").val();
if (type == "Daily") {
ndate = year + monthWeekly + day;
} else if (type == "Weekly") {
ndate = year + monthWeekly
} else if (type == "Monthly") {
ndate = year + monthWeekly
}
if (type == "Daily") {
return this.series.name + "
" + this.point.name + ':' + this.point.y.toFixed(1) + '%';
} else {
return this.series.name + "
" + 'a href="http://localhost:48057/Summary_OEE_Report_Oper_Detail.aspx?type='+ type +'&oper='+ this.point.name +'&ndate='+ ndate +'&depart='+ depart +'" target="_blank">'+ this.point.name +': '+ this.point.y.toFixed(1) +'%'+'/a>'}
}
},
series: [],
drilldown: {
series: []
}
};
3. 展现结果
4. 后台自动截图
1、在服务器上部署自动截图的 API
http://*********:11942/
2、创建模板
{
"chart": {
"width": 900,
"type": "column"
},
"credits":false,
"colors": [
"#00FFFF",
"#0066FF",
"#FF0000",
"#990033",
"#FFC000",
"#FF0000",
"#8d4653",
"#8085e9",
"#f15c80",
"#e4d354",
"#8085e8"
],
"title": {
"text": "$title"
},
"subtitle": {
"text": ""
},
"xAxis": {
"type": "category",
"labels": {
"style": {
"fontWeight": "bold"
}
}
},
"yAxis": {
"title": {
"text": "OEE(%)"
},
"tickPositions": [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
},
"legend": {
"enabled": true
},
"plotOptions": {
"series": {
"borderWidth":1,
"borderColor": "white",
"borderRadius":2,
"dataLabels": {
"enabled": true,
"format":"{point.y:.1f}%"
}
},
"column": {
"stacking": "normal",
"cursor": "pointer",
"dataLabels": {
"enabled": true,
"color": "white",
"style": {
"textShadow": "0 0 3px black",
"fontWeight": "bold"
}
}
}
},
"tooltip": {
"useHTML": true,
"style": {
"padding": 0,
"pointerEvents": "auto"
},
"shared": false
},
"series": [$series],
"drilldown": {
"series": [$drilldown]
}
}
3、调用 API 接口生成图片
string chartJsonPath = Environment.CurrentDirectory + "//Json//chart.json";
StreamReader sr = new StreamReader(chartJsonPath, Encoding.Default);
string line;
string jsonobj = "";
while ((line = sr.ReadLine()) != null)
{
jsonobj = jsonobj + line.ToString();
}
string url = System.Configuration.ConfigurationSettings.AppSettings["PhantomjsUrl"].ToString();
string param = jsonobj.Replace("$series", sbSerie.ToString()).Replace("$drilldown", sbDrilldownSerie.ToString()).Replace("$title", type + "_" + ndate + "_" + depart + "_OEE");
KTD.Utilities.BaseUtils.FileUtils.CreateFile(Encoding.UTF8.GetBytes(param), Environment.CurrentDirectory + "//Json//" + DateTime.Now.ToString("yyyyMMddHHmmss") + ".json");
byte[] bytes;
var client = new HttpClient();
HttpContent content = HttpContent.Create(Encoding.UTF8.GetBytes(param), "application/json");
using (HttpResponseMessage responseMessage = client.Post(url, content))
{
responseMessage.EnsureStatusIsSuccessful();
bytes = responseMessage.Content.ReadAsByteArray();
}
MemoryStream stream = new MemoryStream(bytes);
Bitmap bmp = new Bitmap(stream);
string randomName = ndate +"_"+ depart+".png";
string saveUrl = System.Configuration.ConfigurationSettings.AppSettings["SaveUrl"].ToString() + "//" + randomName;
bmp.Save(saveUrl, ImageFormat.Png);
stream.Dispose();
stream.Close();
bmp.Dispose();
3、截图效果如下 
总结
发现截来的图片和系统执行出来的图样式不能完全一模一样，估计是使用脚本的版本不一样导致。
原文地址: echart 图表之 highcharts
正文完
