基于Highcharts的Web图形化开发

最新推荐文章于 2024-05-10 12:42:21 发布

xiake001

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量1.8k

点赞数

分类专栏：效率工具文章标签： highcharts javascript

本文链接：https://blog.csdn.net/xiake001/article/details/78003006

版权

效率工具专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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 table
var 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;

xiake001

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于Highcharts的Web图形化开发

Html介绍html格式参考文章：html简介 Json格式介绍参考文章：JSON 数据格式highcharts介绍简介 Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表
复制链接

扫一扫

专栏目录