纯JAVASCRIPT图表动画插件Highcharts Examples

下面是“纯JAVASCRIPT图表动画插件Highcharts Examples”完整攻略:

1. Highcharts介绍

Highcharts是一个纯JavaScript编写的图表库,提供了很多基础的图表类型及其组合,包括线图、柱状图、散点图、区域图、饼图、环形图等,并且支持动态数据加载,动画效果等,同时还有非常详细的文档及示例。

2. Highcharts的常见配置项

Highcharts的常见配置项可以参考官方文档中的API中心,下面是一些常见的配置参数及其作用:

  • chart:提供整个图表的设置,如类型、大小等。
  • title:标题设置。
  • xAxis/yAxis:X/Y轴的数据范围设置。
  • series:各个数据系列的设置,如数据源、颜色、大小等。
  • tooltip:鼠标悬浮到数据项上时的提示框设置。
  • legend:图例设置。
  • plotOptions:针对不同类型的图表提供的配置项,如堆积效果、标签样式等。

3. Highcharts Examples

下面是两个Highcharts的示例说明。

示例1:动态更新线图

下面是一个动态更新的折线图。图表中的数据是从服务器请求而来的,每1秒钟更新一次,并通过动画效果进行切换,代码如下:

var chart = Highcharts.chart('container', { // 创建一个chart实例
  chart: {
    type: 'line',
    animation: Highcharts.svg, // 图表初始化完成后是否进行动画效果
    marginRight: 10,
    events: {
      load: function() { //图表加载完成后的回调函数
        var series = this.series[0]; //获取当前数据系列
        setInterval(function() { // 定时器每隔1s更新数据
          var x = (new Date()).getTime(),
              y = Math.random();
          series.addPoint([x, y], true, true); // 更新数据点
        }, 1000);
      }
    }
  },
  title: {
    text: '动态实时更新数据折线图'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数值'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        Highcharts.numberFormat(this.y, 2);
    }
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: '随机数据',
    data: (function() { // 初始数据
      var data = [],
          time = (new Date()).getTime(),
          i;

      for (i = -19; i <= 0; i++) {
        data.push({
          x: time + i * 1000,
          y: Math.random()
        });
      }
      return data;
    })()
  }]
});

示例2:堆积柱状图

下面是一个简单的堆积柱状图。图表中的数据是直接写在代码中的,用于展示不同数据系列之间的比较情况,代码如下:

var chart = Highcharts.chart('container', { // 创建一个chart实例
  chart: {
    type: 'column'
  },
  title: {
    text: '2018-2019年各地油田产量情况比较'
  },
  xAxis: {
    categories: ['山西油田', '辽河油田', '胜利油田', '大庆油田', '吉林油田']
  },
  yAxis: {
    min: 0,
    title: {
      text: '亿吨'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: ( // 返回一个颜色值,用于标签的颜色设置
          Highcharts.defaultOptions.title.style &&
          Highcharts.defaultOptions.title.style.color
        ) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true, // 图例是否浮动
    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal', // 堆积效果
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: [{
    name: '2018年',
    data: [5, 3, 4, 7, 2]
  }, {
    name: '2019年',
    data: [3, 4, 4, 2, 5]
  }]
});

以上是对“纯JAVASCRIPT图表动画插件Highcharts”完整攻略的说明,希望能对您有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯JAVASCRIPT图表动画插件Highcharts Examples - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Javascript Date setUTCDate() 方法

    以下是关于JavaScript Date对象的setUTCDate()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的setUTCDate()方法 JavaScript的setUTCDate()方法设置对象的UTC日期部分。该方法接受一个整数,表示要设置的UTC日期。如果该参数超出了JavaScript所表示的范围,则自动调整为相应的…

    JavaScript 2023年5月11日
    00
  • JS中正则表达式全局匹配模式 /g用法详解

    JS中正则表达式全局匹配模式 /g用法详解 什么是正则表达式全局匹配模式 正则表达式全局匹配模式是一个修饰符,可以用在正则表达式后面,表示在字符串中执行全局匹配。 当使用全局匹配模式后,正则表达式将会匹配字符串中所有符合规则的部分,而非只匹配第一个匹配到的部分。全局匹配模式通过 ‘g’ 修饰符控制。 如何使用正则表达式全局匹配模式 在 JavaScript …

    JavaScript 2023年6月10日
    00
  • javascript中数组的常用算法深入分析

    当我们学习JavaScript编程语言的时候,数组(Array)是一种非常常见和重要的数据结构。数组是一种基本的JavaScript数据类型,它是用来存储一组数据的容器。在日常开发中,我们常常需要对数组进行各种操作。本文将详细介绍JavaScript中数组的常用算法,并分析其实现原理。 数组的常用方法 下面是常用的数组处理方法: 1. 数组去重 functi…

    JavaScript 2023年5月27日
    00
  • 分析web应用内引用依赖的占比

    背景 针对目前团队自己开发的组件库,对当前系统内引用组件库占比进行统计分析,以实现对当前进度的总结以及后续的覆盖度目标制定。 主要思路 目前找到的webpack分析插件,基本都是针对打包之后的分析打包之后的chunk进行分析,但是我希望的是分析每个页面中的import数,对比一下在所有页面中的import数中有多少是使用了组件库的。所以就在网上看了一些相关资…

    JavaScript 2023年4月17日
    00
  • JavaScript中Math.SQRT2属性的使用详解

    JavaScript中Math.SQRT2属性的使用详解 一、Math.SQRT2属性是什么? Math.SQRT2属性是JavaScript语言中的一个预定义常量,它表示的是2的平方根。它的值约等于1.4142135623730951。这个属性会与Math对象绑定,因此可以使用Math.SQRT2来访问它。 二、Math.SQRT2属性的使用 1.使用Ma…

    JavaScript 2023年6月10日
    00
  • 深入理解javascript中defer的作用

    深入理解JavaScript中defer的作用 什么是defer defer是HTML5中定义的一种异步加载脚本的方法,可以让脚本文件在后台加载,不影响页面的渲染,等到页面加载完成后再执行脚本。 如何使用defer 使用defer很简单,只需要在script标签中设置defer属性即可,例如: <script defer src="examp…

    JavaScript 2023年6月10日
    00
  • jQuery通过写入cookie实现更换网页背景的方法

    jQuery 通过写入 cookie 实现更换网页背景的方法,实际上就是利用 cookie 存储用户选择的网页背景样式及其对应的 CSS 样式类名,在页面加载时根据 cookie 中存储的样式类名来设置页面背景样式。 具体实现步骤如下: 1. HTML 结构 在 HTML 文档的 head 标签中引入 jQuery 库和自定义 js 文件。 <!DOC…

    JavaScript 2023年6月11日
    00
  • js调试系列 控制台命令行API使用方法

    JS调试系列:控制台命令行API使用方法 控制台是Web浏览器开发工具的一部分,可以用于调试JavaScript代码以及检查页面元素。控制台中包含了一个强大的命令行接口,用户可以通过API直接与页面交互,从而进行调试、编辑、修改和测试。 本文将详细讲解控制台命令行API的使用方法,包括常见的API函数、参数、数据类型、输出格式等,并附带两个实例说明。 控制台…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部