纯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日

相关文章

  • C#基于正则表达式抓取a标签链接和innerhtml的方法

    下面是详细的讲解 C#基于正则表达式抓取a标签链接和innerhtml的方法的完整攻略。 步骤一:定位要抓取的页面 首先你需要确定你要抓取的页面,一般情况下是从一个 URL 开始。你可以使用 C# 的网络请求库来请求这个 URL,我们以 System.Net.WebClient 为例: var client = new System.Net.WebClien…

    JavaScript 2023年6月10日
    00
  • es6中的解构赋值、扩展运算符和rest参数使用详解

    关于ES6中的解构赋值、扩展运算符和rest参数使用详解,具体内容如下: 一、解构赋值 解构赋值是ES6最常用的功能之一,可以快速的将数组或对象中的值,直接赋值给变量。示例如下: 1.1 数组解构赋值 const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c); // 输出: 1, 2…

    JavaScript 2023年6月11日
    00
  • JavaScript生成.xls文件的代码

    生成Excel文件是前端开发中常见的需求之一,可以通过JS库来实现。目前比较流行的库有两个:SheetJS和Handsontable,本文将以SheetJS为例来讲解如何使用JS生成Excel文件的完整攻略。 SheetJS库介绍 SheetJS是一组用于处理Excel文件的JS库,可读取、修改和写入Excel文件,支持XLS、XLSX等多种格式。同时She…

    JavaScript 2023年5月19日
    00
  • js+canvas实现两张图片合并成一张图片的方法

    首先,我们需要创建一个基础的HTML文件,并在其中添加一个canvas标签和两个img标签,用来实现两张图片的显示和合并。 <!DOCTYPE html> <html> <head> <title>JS+Canvas实现图片合并</title> <meta charset="utf-…

    JavaScript 2023年6月10日
    00
  • 浅谈JavaScript之事件绑定

    下面是详细讲解“浅谈JavaScript之事件绑定”的完整攻略。 什么是事件绑定? 事件绑定是将一个事件与指定的元素相关联,当事件发生时,执行一个特定的代码块。JavaScript中事件绑定有两种方式:传统的HTML事件处理程序和新式的事件监听器。 HTML事件处理程序 HTML事件处理程序是通过在HTML标签中添加onclick等事件属性来触发一系列Jav…

    JavaScript 2023年6月10日
    00
  • MySQL pt-slave-restart工具的使用简介

    当MySQL复制出现异常时(如主从延迟、主从不同步),我们可以使用Percona Toolkit中的pt-slave-restart工具来帮助我们快速地解决问题。本篇攻略将详细讲解如何使用pt-slave-restart工具。 什么是pt-slave-restart工具 pt-slave-restart工具是Percona Toolkit中的一款工具,用于重…

    JavaScript 2023年5月28日
    00
  • 基于Bootstrap 3 JQuery及RegExp的表单验证功能

    针对“基于Bootstrap 3 JQuery及RegExp的表单验证功能”的完整攻略,下面我们分步骤进行讲解。 1. 引入依赖 首先,我们需要在网页中引入所需的相关依赖,包括Bootstrap 3、JQuery和RegExp,可以通过CDN或者本地文件进行引入。 <head> <link rel="stylesheet&quot…

    JavaScript 2023年6月10日
    00
  • js 中获取制定的cook信息实现方法

    获取指定的 cookie 信息需要以下步骤: 使用document.cookie获取所有的 cookie 信息。 将获取到的 cookie 信息字符串转换为数组形式。 遍历 cookie 数组,检查指定的 cookie 名称是否存在。 如果指定的 cookie 存在,使用正则表达式取出对应的值并返回。 下面是详细的实现过程: 步骤1:使用 document.…

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