echart图表之highcharts

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

前段时间公司要统计各个站的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) {//alert("dddd");}}},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) {//alert(e.point.name);var type = $("#<%=ddlType.ClientID %>").val();var year = $("#<%=ddlYear.ClientID %>").val();var monthWeekly = $("#<%=ddlMonthWeekly.ClientID %>").val();var day = $("#<%=ddlDay.ClientID %>").val();var depart = $("#<%=ddlOcapDepart.ClientID %>").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";$("#<%=HiddenField1.ClientID %>").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 = $("#<%=ddlType.ClientID %>").val();var year = $("#<%=ddlYear.ClientID %>").val();var monthWeekly = $("#<%=ddlMonthWeekly.ClientID %>").val();var day = $("#<%=ddlDay.ClientID %>").val();var depart = $("#<%=ddlOcapDepart.ClientID %>").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 + "<br/>" + this.point.name + ': ' + this.point.y.toFixed(1) + '%';} else {return this.series.name + "<br/>" + '<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、截图效果如下

---

总结

发现截来的图片和系统执行出来的图样式不能完全一模一样，估计是使用脚本的版本不一样导致。