基于Highcharts的Web图形化开发

来源：互联网发布：360杀毒mac版编辑：程序博客网时间：2024/06/04 18:53

Html介绍

html格式

参考文章：html简介

此处输入图片的描述

Json格式介绍

参考文章：JSON 数据格式

highcharts介绍

简介

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
参考：百科

下载

英文官网
中文官网
下载源代码

一个例子

    <!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <style type="text/css">            #container {            min-width: 310px;            max-width: 800px;            height: 400px;            margin: 0 auto            }        </style>    </head>    <body><!---加入highcharts两个库文件---><script src="../../code/highcharts.js"></script><script src="../../code/modules/exporting.js"></script><div id="container"></div>        <script type="text/javascript">            Highcharts.chart('container', {                title: {                    text: 'Solar Employment Growth by Sector, 2010-2016'                },                subtitle: {                    text: 'Source: thesolarfoundation.com'                },                yAxis: {                    title: {                        text: 'Number of Employees'                    }                },                legend: {                    layout: 'vertical',                    align: 'right',                    verticalAlign: 'middle'                },                plotOptions: {                    series: {                        pointStart: 2010                    }                },                <!---绘图数据--->                series: [{                    name: 'Installation',                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]                }, {                    name: 'Manufacturing',                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]                }, {                    name: 'Sales & Distribution',                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]                }, {                    name: 'Project Development',                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]                }, {                    name: 'Other',                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]                }]            });        </script>    </body></html>

图形开发

实现图形与数据文件（html与data）分离

1.思想

为了设计成一个界面与数据分离的低耦合的模型，可以考虑将html文件作为一个框架文件有固定的风格，而数据配置可单独生成一个文件如test.data/test.js。在html文件中调用，添加如下语句即可：

    <script src="test.data"></script>

2.一个完整的例子

可将上述的例子按此方法改进。

line.htm文件：

<!DOCTYPE HTML><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>Highcharts Example</title>    <style type="text/css">#container {    min-width: 310px;    max-width: 800px;    height: 400px;    margin: 0 auto}    </style></head><body><script src="../../code/highcharts.js"></script><script src="../../code/modules/exporting.js"></script><script src="line.data"></script><div id="container"></div>    <script type="text/javascript"> var options ={chart: {                renderTo: 'container',            },title: {    text: 'Solar Employment Growth by Sector, 2010-2016'},subtitle: {    text: 'Source: thesolarfoundation.com'},yAxis: {    title: {        text: 'Number of Employees'    }},legend: {    layout: 'vertical',    align: 'right',    verticalAlign: 'middle'},plotOptions: {    series: {        pointStart: 2010    }},}var chart;options.title.text = title;options.subtitle.text = subtitle;options.series = new Array();for(var i=0; i<data.length; ++i){    options.series[i] = new Object();    options.series[i].name = plot_legend[i];    options.series[i].data = data[i];}chart = new Highcharts.Chart(options);    </script></body></html>

line.data文件：

var title = 'testTitle';var subtitle = 'testSubtitle';var plot_legend = ['Installation','Manufacturing','Sales & Distribution','Project Development','Other'];var data = [[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],[null, null, 7988, 12169, 15112, 22452, 34400, 34227],[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]]

这样，我们就可以只对data文件进行操作，达到了高度可配置的目的。

显示界面设置

1.风格&添加按钮

风格有两种设置方法：
method 1：

<style type="text/css">    #container {        min-width: 310px;        max-width: 1999px;        height: 800px;        margin: 0 auto    }</style><div id="container"></div>

method 2：

<div id="container" style="min-width: 310px; height: 800px; margin: 0 auto"></div>

2.js页面加载初始化方法

参考文章：初始化方法
参考文章：加载顺序

            //init subtitle            window.onload=function(){                 // Init                show_chart();                //document.title = title            }

3.自动刷新与控制

    function myrefresh()             {                  //if(parseInt(num.value) == 1)                //  window.location.reload();                 if(bRefresh)                    window.location.reload();                 console.log("hello world");            }             setTimeout('myrefresh()',3000); //refresh        function ctrlRefresh() {            if(true == (bRefresh = !bRefresh))            {                document.getElementById("btn_refresh").value="Auto Refresh";                window.location.reload();             }            else            {                document.getElementById("btn_refresh").value="Stop Refresh";            }            console.log("hello");        }

4.body与head区别

参考： javascript放在head和body的区别

在HTML body部分中的JavaScripts会在页面加载的时候被执行。  在HTML head部分中的JavaScripts会在被调用的时候才执行。

5.添加表格

//show tablevar show_table = function(table_header, table){    if(table_header instanceof Array)     {        //table head        var trHTML = "<tr>";        //表格标题风格，注意遇到引号加‘\’        $("#gridtable").append("<caption style=\"padding:10px 10px;font-size:20px;color:'black';\" align=\"center\">All Question Score Info</caption>");        for(var i = 0; i < table_header.length; i++)         {            trHTML += "<th>" + table_header[i] + "</th>";        }        trHTML += "/<tr>";        $("#gridtable").append(trHTML);        //table data        if(table instanceof Array)        {            for(var i = 0; i < table.length ; i++)             {                var trHTML = "<tr>";                for(var j = 0; j < table[i].length ; j++) {                    trHTML += "<td>" + table[i][j] + "</td>";                    console.log(trHTML);                }                 trHTML += "/<tr>";                $("#gridtable").append(trHTML);            }        }     }}

6.中文显示

需要注意的是html文件的格式必须保存为utf-8。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

7.标题颜色设置

var title_color = { color: 'black' };options.title.style = title_color;

阅读全文

0 0