当前位置：首页 > 资讯 > 技术文档

Highcharts学习之数据列

时间：2020-02-20 05:33 编辑：来源：阅读：
扫一扫，手机访问

摘要：Highcharts学习之数据列

[b]什么是数据列[/b] 数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [{
  name : '',
  data : []
}]

[b]提示：[/b]数据列配置是个数组，也就是数据配置可以包含多个数据列。数据列中的[b]name [/b]代表数据列的名字，并且会显示在数据提示框（[b]Tooltip[/b]）及图例（[b]Legend[/b]）中 [b]tags:[/b] [img]http://files.jb51.net/file_images/article/201608/201683144250105.png?20167314434[/img] [b]1.数据列中的数据填充：[/b] [b]方法一：一维数组[/b] 如果有categories属性的话就是使用一维数组

data : [1, 4, 6, 9, 10]

[b]方法二：二维数组[/b] 如果没有categories属性的话就是使用二维数组

data ： [ [5, 2], [6,3], [8,2] ]

[b]方法三：集合[/b]

series:[{
  data : [{
  name : "point 1",
  color : "#00ff00",
  y : 0
  }, {
  name : "Point 2",
  color : "#ff00ff",
  y : 5
 }]
}]

[b][img]http://files.jb51.net/file_images/article/201608/201683144439667.png?201673144450[/img] [/b] [b]2.线条宽度（lineWidth）：[/b] 将线条的宽度改为5px默认为1px

series: [{
 data: [216.4, 194.1, 95.6],
 lineWidth: 5
}]

[b]3.数据标签（dataLables）：[/b]

plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
              }
      }
    },

[b]4.线条样式（Dash Style）:[/b]

series: [{
      data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
      dashStyle: 'longdash'
    }, {
      data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
      dashStyle: 'shortdot'
    }]

[b]5.Zoom[/b]

series:[{
        name:"a",
        data:[1,2,3],
        zoneAxis: 'x',  //指定作用于哪个轴
        zones: [{
      value: 1.7,
      color:'#90ed7d'//这两个属性是可以放在一起的但不能和dashStyle放在一起
        }, {
          dashStyle: 'dot'
        }]
      }]

以上就是本文的全部内容，在 Highcharts 中，数据列的配置是个非常重要的配置，同时又由于可配置的属性非常对，配置的灵活性非常高，需要大家自己自己体会和理解。

全部评论(0)

上一篇：深入浅析NodeJs并发异步的回调处理
下一篇：基于jQuery实现左右图片轮播（原理通用）

资讯排行榜
更多>>