当前位置: 首页 > 编程笔记 >

Highcharts入门之简介

闻人和泽
2023-03-14
本文向大家介绍Highcharts入门之简介,包括了Highcharts入门之简介的使用技巧和注意事项,需要的朋友参考一下

在网页中创建一个这样的图表,你觉得会要多久?

确实需要很久很久,如果你对JavaScript不是特别熟练的话。

但是有个好消息就是如果,你使用Highcharts框架的话,可能十多行代码就能让你在页面中生成这样有特效的图表。

当然他的功能远不止这些,各种图表,打印,导出,对比分析。

他不仅仅可以用来做网站的图表分析,就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧,完全就可以抛弃PPT了啊。

所以赶紧来了解如何使用他吧!!!

下面给一个简单的Dome:

    1.在highcharts中属性以逗号隔开

    2.一个大的属性中使用{},在{}中填写具体的属性

    3.除了数据其他的属性一般使用”"包含

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="chart" style="width: 800px ;height: 400px"> 
</div>
<script>
  $(function () {
    $(".chart").highcharts({  //指定在class为chart的地方创建图表
      chart:{
        type:'line'   //图表的类型,还有column等
      },
      title:{
        text:'Dome01'  //图表的标题
      },
      xAxis:{
        categories:['A','B','C','D']  //x坐标的分组
      },
      yAxis:{
        title:{
          text:'some'   //y坐标的标题
        }
      },
      series:[{
        name:'zhangsan',  //数据的名称
        data:[2,3,5,3]   //具体的数据
      },{
        name:'lisi',
        data:[3,5,1,3]
      },{
        name:'wangwu',
        data:[1,4,6,2]
      }]
    }) ;
  });
</script>
</body>
</html>

如果现在看不懂也没关系,可以放在浏览器里试一试,后续我还会更新Highcharts的相关文章,感兴趣的朋友们可以继续支持小牛知识库。

 类似资料:
  • 本文向大家介绍Highcharts入门之基本属性,包括了Highcharts入门之基本属性的使用技巧和注意事项,需要的朋友参考一下 一.基本组成:     1.Highcharts包含标题(Title):主标题是必须的但是subTTitle不是必须     2.坐标轴(Axis):有x坐标(xAxis)和y坐标(yAxis)     3.数据列(Series):每个曲线,每个柱形条组,每个饼图的部

  • Highcharts 是一个纯粹的基于 JavaScript 的图表库,旨在通过添加交互式图表功能来增强Web应用程序。 Highcharts 提供各种各样的图表。

  • 主要内容:创建GWT Web项目,导入GWT Google Charts的Jar包,修改HelloWorld.gwt.xml,修改HelloWorld.html,HelloWorld配置类,启动项目,查看结果在本章中,我们将展示使用 GWT 中的 Highcharts API 绘制图表所需的配置。 创建GWT Web项目 项目结构如下: 导入GWT Google Charts的Jar包 在根目录下创建一个lib目录,把Google Charts的包导入 修改HelloWorld.gwt.xml

  • Spring Security是什么? Spring Security提供了基于Java EE的企业应用软件全面的安全服务。这里特别强调支持使用Spring框架构建的项目,Spring框架是企业软件开发Java EE方案的领导者 . 如果你还没有使用Spring来开发企业应用程序,我们热忱的鼓励你仔细的看一看。熟悉Spring特别是依赖注入原理将帮助你更快更方便的使用Spring Secirity

  • 原文地址:http://truffleframework.com/docs/ Truffle是一个世界级的开发环境,测试框架,以太坊的资源管理通道,致力于让以太坊上的开发变得简单,Truffle有以下: 内置的智能合约编译,链接,部署和二进制文件的管理。 快速开发下的自动合约测试。 脚本化的,可扩展的部署与发布框架。 部署到不管多少的公网或私网的网络环境管理功能 使用EthPM&NPM提供的包管理

  • 本文向大家介绍Vuex简单入门,包括了Vuex简单入门的使用技巧和注意事项,需要的朋友参考一下 1.Vuex是什么? 学院派:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。 理解:以上这4个词是我们理解的关键。状态:什么是状态,我们可以通俗的理解为数据。Vue只关心视图层,那么视图的状态如何来确定?我们知道是通过数据驱动,这里的状态管理可以简单理