纯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”完整攻略的说明，希望能对您有所帮助。