使用Highcharts做一个简单的折线图

最新推荐文章于 2024-07-20 10:10:38 发布

因为有你更精彩

最新推荐文章于 2024-07-20 10:10:38 发布

阅读量1k

点赞数

分类专栏： highcharts 文章标签： highcharts js 前端图表

本文链接：https://blog.csdn.net/qq_36003284/article/details/89850512

版权

highcharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始前请下载Highcharts.js https://www.highcharts.com.cn/download

想要达成的图表效果

如何达成这个折线图的效果

我们在画页面时对于数据的展现，对于初学者，怎么更好的展现数据是困难的，这里将会提供一个简单的办法来展现数据的方式。

Highcharts 的优势

Highcharts 完全基于 HTML5 技术，不需要按照按照任何插件，也不需要配置 PHP、Java 等运行环境，只需要两个 JS 文件即可使用；
源代码基于 Github 托管，任何人都可以下载和修改源码；
图表丰富 Highcharts 提供丰富的图表类型，线图、柱形图、饼图、散点图、仪表图、雷达图、热力图、混合图等多，Highstock 则提供股票走势图（K线、分时）、高级时间轴图，Highmaps 提供各种丰富多样的地图；
兼容 IE6+，同时完美支持移动端触摸操作、手势缩放，并且能够保证在不同的浏览器上做到展现效果和使用体验一致性；
支持动态增加、修改、删除数据列、数据点、坐标轴操作，支持多种交互操作，丰富灵活的API可以精准控制图表的每一个细节！

第一步新建一个aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="LIMS.audit.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

第二步引用js文件

    <%--加载图表--%>
     <script type="text/javascript" src="../easyui/Highcharts-7.1.1/code/highcharts.js"></script>
     <script type="text/javascript" src="../content/ueditor1_4_3_3-utf8-net/utf8-net/third-party/highcharts/modules/exporting.js"></script>
     <script type="text/javascript" src="../easyui/Highcharts-7.1.1/code/modules/series-label.js"></script>
    <script src="../easyui/Highcharts-7.1.1/code/modules/oldie.js"></script>

第三步创建一个div

 <div id="container"  style="height:100%">
    </div>

第四步对这个div进行定义


            Highcharts.setOptions({
                lang: {
                    printChart: "打印图表",
                    downloadJPEG: "下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG图片",
                    downloadSVG: "下载SVG矢量图"
                }
            });

            Highcharts.chart('container', {

                title: {
                    text: '检验样品数量'
                },

                subtitle: {
                    text: '来自LIMS统计'
                },

                yAxis: {
                    title: {
                        text: ''
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },



                xAxis: {
                    categories: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
                },
                credits: {
                    enabled: false     //不显示LOGO 
                },
                series: [{
                    name: '理化室',
                    data: [43934, 52503, 57177, 69658, 57031, 69931, 37133]
                }, {
                    name: '微生物室',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121]
                }, {
                    name: '仪器室',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147]
                }, {
                    name: '药理室',
                    data: [null, null, 7988, 12169, 15112, 22452, 34400]
                }, {
                    name: '水质室',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274]
                }],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

            });

关于 Highcharts ，请参考官网。.

因为有你更精彩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Highcharts做一个简单的折线图

开始前请下载Highcharts.js https://www.highcharts.com.cn/download想要达成的图表效果如何达成这个折线图的效果我们在画页面时对于数据的展现，对于初学者，怎么更好的展现数据是困难的，这里将会提供一个简单的办法来展现数据的方式。Highcharts 的优势Highcharts 完全基于 HTML5 技术，不需要按照按照任何插件，也不需要配置 ...
复制链接

扫一扫