(三)、使用HighCharts创建第一个图表实例

最新推荐文章于 2019-05-15 10:45:20 发布
最新推荐文章于 2019-05-15 10:45:20 发布
阅读量902 收藏
点赞数
分类专栏： Chart

在你的项目中引入上一篇中提到的js文件，项目根目录下新建一个JS文件夹，然后将前面下载的js文件放入该文件夹下，放入后的效果如下：

 

 

在前台aspx页面中，引入以上js文件，如下：

[c-sharp] view plain copy
  1. <mce:script src="JS/jquery1.5.2.js" mce_src="JS/jquery1.5.2.js" type="text/javascript"></mce:script>  
  2.     <mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>  
  3.     <!-- 添加主题样式js文件 -->  
  4.     <mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>  
  5.     <!--添加导出模式 -->  
  6.     <mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>  

 

接下来，看下Script脚本中的内容：

[c-sharp] view plain copy
  1. <mce:script type="text/javascript"><!--  
  2.        var chart;  
  3.        $(document).ready(function () {  
  4.            chart = new Highcharts.Chart({  
  5.                chart: {  
  6.                    renderTo: 'container',  
  7.                    defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter  
  8.                    inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置  
  9.                },  
  10.                xAxis: {  
  11.                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值  
  12.                    title: {text: '周数'},  //Y轴坐标标题  labels:纵柱标尺  
  13.                },  
  14.                yAxis: {  
  15.                    title: {text: '人数(人)'},  //Y轴坐标标题  labels:纵柱标尺  
  16.                    min:0  
  17.                },  
  18.                tooltip: {  
  19.                    formatter: function() {  
  20.                        //当鼠标悬置数据点时的格式化提示  
  21.                        return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;  
  22.                    }  
  23.                },  
  24.                credits: {  
  25.                    enabled: false  
  26.                },  
  27.                plotOptions: {  
  28.                    column: {  
  29.                        pointPadding: 0.2,  //图表柱形的  
  30.                        borderWidth: 0      //图表柱形的粗细  
  31.                    },bar: {  
  32.                        dataLabels: {  
  33.                            enabled: false  
  34.                        }  
  35.                    }  
  36.                },  
  37.                title: { text: '图表主标题' }, //图表主标题  
  38.                subtitle: {text: '图表子标题' }, //图表副标题  
  39.            series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]  
  40.            });  
  41.        });  
  42.      
  43. / --></mce:script>  

 

里面字段有注释，很容易看得出各个字段的意义。

 

 

下面贴出全部代码，及效果图：

[c-sharp] view plain copy
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HighCharts_Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <mce:script src="JS/jquery1.4.2.js" mce_src="JS/jquery1.4.2.js" type="text/javascript"></mce:script>  
  7.     <mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>  
  8.     <!-- 添加主题样式js文件 -->  
  9.     <mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>  
  10.     <!--添加导出模式 -->  
  11.     <mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>  
  12.     <mce:script type="text/javascript"><!--  
  13.         var chart;  
  14.         $(document).ready(function () {  
  15.             chart = new Highcharts.Chart({  
  16.                 chart: {  
  17.                     renderTo: 'container',  
  18.                     defaultSeriesType: 'column', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter  
  19.                     inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置  
  20.                 },  
  21.                 xAxis: {  
  22.                     categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值  
  23.                     title: {text: '周数'},  //Y轴坐标标题  labels:纵柱标尺  
  24.                 },  
  25.                 yAxis: {  
  26.                     title: {text: '人数(人)'},  //Y轴坐标标题  labels:纵柱标尺  
  27.                     min:0  
  28.                 },  
  29.                 tooltip: {  
  30.                     formatter: function() {  
  31.                         //当鼠标悬置数据点时的格式化提示  
  32.                         return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;  
  33.                     }  
  34.                 },  
  35.                 credits: {  
  36.                     enabled: false  
  37.                 },  
  38.                 plotOptions: {  
  39.                     column: {  
  40.                         pointPadding: 0.2,  //图表柱形的  
  41.                         borderWidth: 0      //图表柱形的粗细  
  42.                     },bar: {  
  43.                         dataLabels: {  
  44.                             enabled: false  
  45.                         }  
  46.                     }  
  47.                 },  
  48.                 title: { text: '图表主标题' }, //图表主标题  
  49.                 subtitle: {text: '图表子标题' }, //图表副标题  
  50.             series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]  
  51.             });  
  52.         });  
  53.       
  54. // --></mce:script>  
  55. </head>  
  56. <body>  
  57.     <form id="form1" runat="server">  
  58.     <div>  
  59.          <div id="container" style="width: 800px; height: 400px; margin: 0 auto">  
  60.         </div>  
  61.     </div>  
  62.     </form>  
  63. </body>  
  64. </html>   

 

 

如果将代码中defaultSeriesType: 'column'修改成
                    defaultSeriesType: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter

则样式样式如下：

 

如果将代码中defaultSeriesType: 'column'修改成
                    defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter

则样式样式如下：


Highcharts 动态修改主题
X01动力装甲的专栏
10-27 1497
Highcharts 动态修改主题 在higncharts的主题教程中主题是通过src的方式来配置的，也就是在绘制前，主题已经确定了，如果我想动态修改主题该如何操作呢？ 官方貌似并没有提供切换主题的api接口（我没找到，谁找到了告诉我一下哈）。于是我找了一个笨方法来，不给接口，那么我就搬源码。 比如再绘制的之前是默认主题，点击按钮之后我想切换到dark unica主题。直接去把dark unica的源码考出来。配置下，然后重新绘制图表。 Highcharts.theme = { colors
Highcharts介绍及vue示例
ppp80的专栏
06-29 8205
 Highcharts 是一款用纯JavaScript编写的一个图表库，使用非常简单。而且官网提供了大量的示例，这些示例可以直接复制到自己的代码中，只需要按自己的业务要求绑定数据即可。    和其他图表控件比较，Highcharts是经过多年的开发和维护拥有着丰富的图表功能，有稳定的性能以及专业详细的开发文档，上手极其容易，而且图表展现出来也是非常的美观简约。另外HighCharts还有很好的兼容...
highCharts的开发应用
weixin_40393061的博客
10-02 310
highCharts是用来做图标的插件，基于jquery 效果图如下： 加载数据方式1如下 &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;AJAX异步请求数据&a
HighChart使用注意
heni6560的博客
05-15 536
1.柱状图上显示数据 plotOptions: { column: { borderWidth: 0, dataLabels: { enabled: true //柱状图上显示数据 } } } 2.去掉1,2位置 //去除右下角highchart.com credits: { enabled:false } //去除右上角...
自定义Highcharts主题属性并应用
Try My Best 尽力而为
12-28 685
在使用Highcharts的过程中，你一定想过“美化”Highcharts，也就是社交网站常见的换“皮肤主题“。下面就用一个小的demo来看一看如何自定义一套”皮肤“并且把它应用起来，顺便巩固一下Highcharts一些常用属性的定义。 这里的”皮肤“可不是css，而是js。如： //用于定义皮肤 //自定义皮肤 var my_skin = { //颜色数组，默认从数组第...
使用HighCharts创建第一个图表实例
boshuzhang的专栏
02-16 1644
(三)、使用HighCharts创建第一个图表实例 标签： functionxhtmlserverdiv脚本 2011-04-15 15:32 22169人阅读 评论(17) 收藏 举报  分类：   .NET 图表专区（13）  版权声明：本文为博主原创文章，未经博主允许不得转载。 在你的项目中引入上一篇中提到的js文件，项目根目录下
使用Highcharts创建图表示例
1. 初始化图表：通过`new Highcharts.Chart`创建一个新的图表实例，设置图表的基本属性，如渲染容器、X轴和Y轴的配置、系列数据等。 2. 数据系列：`series`对象定义了图表的数据，可以包含多个数据系列。 3. X轴和Y...
Javascript highcharts 饼图显示数量和百分比实例代码
10-20
每个数组项代表饼图的一个部分，其中第一个元素是部分名称，第二个元素是该部分的数量。 综上所述，我们了解了如何利用 Highcharts 创建一个显示数量和百分比的饼图，以及如何通过配置项自定义图表的不同部分。这个...
数据呈现&图表插件Highcharts介绍+图表联动案例
Creabine的博客
04-28 5875
由于项目需要，学习并使用了Highcharts图表插件，这是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库插件。 Highcharts简介下边的介绍来自Highcharts中文网 Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等
asp.net(c#) 与 highcharts 数据库交互
06-16
可实现 highcharts 和 数据库交互。内附：效果图及相关js
网页图表Highcharts实践教程基础篇
09-08
**2.1 第一个实例** 创建一个简单的Highcharts图表涉及以下几个步骤： 1. **引入Highcharts库**：通过`<script>`标签加载Highcharts库。 2. **准备HTML容器**：创建一个`<div>`元素，用于放置图表。 3. **配置图表...
Highcharts(纯JS图表插件)
10-19
创建一个Highcharts图表的第一步是引入相关的JavaScript文件，通常包括`highcharts.js`或其压缩版`highcharts.min.js`。然后，你需要在HTML中定义一个用于展示图表的容器，比如一个`<div>`元素。接着，通过...
Highcharts结合Asp.net实现动态数据股票式图形显示实例
04-24 9928
本实例针对的具体应用行情是我需要定时从数据库中读取某商品价格,然后以图形显示在网页上,类似于股票中的交易品种价格走势图. 我使用的是asp.net,结合jQuery中的Highcharts插件实现,该插件可以支持很多类型的图形,但都是静态的,提供的实例都需要改造,有兴趣的朋友可以去Highcharts官网看看(http://www.highcharts.com/),里面提供了很多的Demo,说实
基于Django花卉商城系统的设计与实现-2885fb37-.zip
04-16
基于Django花卉商城系统的设计与实现_2885fb37--.zip
102页-智慧农业解决方案.pdf
最新发布
04-16
智慧农业，作为现代农业的新篇章，正引领着农业生产的革命性变革。本解决方案以物联网、云计算、大数据等先进技术为核心，为农业生产打造了一套全面、智能的管理系统。 想象一下，从温室大棚到广袤田野，智能传感器遍布每个角落，它们能实时感知空气温湿度、土壤水分、光照强度等环境参数，仿佛为农作物装上了“眼睛”和“耳朵”。这些数据通过物联网技术传输到云端，经过大数据分析，为农民提供精准的种植建议，如何时灌溉、施肥、防虫，让农业生产变得更加科学、高效。 更有趣的是，通过智慧农业平台，农民可以远程监控作物生长情况，甚至用手机就能控制温室大棚的遮阳板、通风设备等，实现“指尖上的农业”。此外，方案还包含了农产品可追溯系统，从田间到餐桌，每一步都可追溯，让消费者吃得放心。而智慧农业电商平台，则让农产品销售更加便捷，农民直接对接市场，收益倍增。 总之，这套智慧农业解决方案不仅让农业生产变得更加智能、高效，还提升了农产品的质量和安全，为农民带来了实实在在的收益，开启了农业现代化的新篇章。 对于想要投身智慧农业领域的你来说，这不仅仅是一套解决方案，更是一把开启现代农业大门的钥匙，引领你走向更加辉煌的未来。
【人工智能模型部署】DeepSeek本地部署与WebUI可视化：环境搭建、模型启动及界面开发指南文档的主要内容
04-16
内容概要：本文档详细介绍了DeepSeek本地部署与WebUI可视化的一般步骤。本地部署方面，涵盖了环境准备（硬件要求如多核CPU、8GB以上内存或带适当显存的NVIDIA GPU，软件环境涵盖操作系统如Ubuntu 20.04及以上版本、Python环境及依赖库如PyTorch或TensorFlow）、获取DeepSeek模型代码和权重（通过官方仓库克隆代码，从指定渠道下载权重）、模型配置与启动（配置模型参数，运行启动脚本以初始化模型和服务）。WebUI可视化部分则推荐了Streamlit和Gradio两种框架，介绍了它们的安装、使用方法（通过编写脚本调用DeepSeek API构建交互界面），以及集成与部署（确保WebUI与模型服务之间的数据正确传递，在本地运行后可通过浏览器访问）。 适合人群：对深度学习模型部署有一定了解的技术人员，尤其是那些希望将DeepSeek模型应用于本地环境并提供用户友好界面的研发人员。 使用场景及目标：①为希望在本地环境中运行DeepSeek模型的研究者或开发者提供详细的部署指南；②帮助用户快速搭建一个带有图形化操作界面的DeepSeek应用，降低使用门槛，提高用户体验。 阅读建议：在阅读时，应根据自己的操作系统环境和硬件条件调整相应的配置要求，同时注意按照官方文档的具体指引操作，确保各组件版本兼容，以便顺利完成部署和可视化工作。
MISRA C 2014和MISRA CPP 2008版本
04-16
MISRA C 2014和MISRA CPP 2008版本
Revit2024二次开发之安装Addin
04-16
Revit2024二次开发之安装Addin
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值