2.3 图表中的数据使用
在实际应用中，图表涉及的数据有很多种。根据常见的数据类型，图表常见的数据包括数值类型、时间日期类型和字符串类型。本节详细讲解这3种数据的使用方式。
2.3.1 数值类型数据
在Highcharts中，数值类型数据是使用最多的，也是使用方式最简单的。用户只要正确赋值，就可以直接使用。对于一些特殊的数据，还需要额外的处理。
1．比较大的数据
对于比较大的数值，Highcharts显示的时候会有一些特殊的处理。
【实例2-4：bignumber】下面是一个展现大数值的图表。核心代码如下：
var options = {
chart: {
type: 'line'
},
title: {
text: '大数值图表'
},
subtitle: {
text: '临时数据'
},
series: [{
data: [50, 2000, 2790, 3900, 1000, 4000, 5000, 2000, 1598, 2460],
pointStart: 1,
pointInterval:1
}],
credits: {
text: '大学霸',
href: 'http://daxueba.net'
}
};
执行代码后，效果如图2.4所示。从图中可以看到，y轴上的刻度均以k为单位来显示。并且，提示框中显示的y值也以每3位间隔显示。
图2.4 大数值图表
这两种显示都是国外常见的一种数值显示方式。但是这种使用方式，在国内并不普及。如果要取消这两种显示，需要修改Highcharts的全局配置。修改全局配置需要使用类Highcharts的setOptions()方法。语法如下：
Highcharts.setOptions({
//相关配置项
})
其中相关配置项包括两个顶级配置项global和lang。这里，需要使用顶级配置项global中的配置项numericsSymbols和thousandsSep。下面依次介绍这两个配置项的使用。
（1）配置项numericsSymbols用来设置数值单位，如千和兆之类。其语法如下：
numericSymbols: Array<String>
其中，参数Array<String>表示数值单位，默认值为[ "k"，"M"，"G"，"T"，"P"，"E"]。如果用户想要禁用该功能，只需要将该配置项设置为null即可。
（2）配置项thousandsSep用于设置千位分隔符，也就是说小数点左侧每3位使用特殊符号做分割。其语法如下：
thousandsSep: String
其中，参数String指定分隔所使用的符号，默认为空格。
【实例2-5：bignumberedit】下面重新设置大数值的显示形式。核心代码如下：
var options = {
};
Highcharts.setOptions({
lang: {
numericSymbols: null, //设置数值单位
thousandsSep:'' //设置千分位分隔符
}
});
执行代码后，效果如图2.5所示。
图2.5 调整的大数值显示
2．小数数据
由于计算机无法精确表示数据，往往会造成小数的位数过多，而影响图表显示。这个时候，可以用类似C语言打印函数的格式修饰符，对数据输出格式进行限制。该格式修饰符用于各个数据的格式化配置项中，如数据标签的配置项format中。
【实例2-6：datafloat】下面指定图表数据显示的小数位数。核心代码如下：
series: [{
type: 'spline',
data: [[12, 34], [23, 89.99], [30, 67], [45, 23], [62, 79]],
dataLabels: {
enabled:true,
format:'{point.y:3.1f}'
}
}]
运行代码，效果如图2.6所示。在代码中，3.1f表示整个数据总长为3位，小数位数为一位。第二个节点数据总共4位，小数点后两位，按照格式会被四舍五入，所以显示为90.0。
图2.6 小数位数显示
2.3.2 时间日期类型数据
时间日期数据也是图表中常用的数据类型。由于这类数据涉及实际生活，所以其输入和显示受到更多限制。下面详细讲解时间日期数据的使用方式。
1．数据赋值
在Highcharts中，要正确处理时间日期数据，最好将时间转化为时间戳格式。时间戳是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的总毫秒数。实际上，时间日期数据是以整型来处理的。
手动转化时间戳比较麻烦，通常都是使用Javascript函数Date.UTC()转化。其语法格式如下：
Date.UTC(year,month,day,hours,minutes,seconds,ms)
其中，参数year指定4位数字形式的年份；参数month指定月份，范围为0～11；参数day指定日期的整数，范围为1～31；参数hours指定小时的整数，范围为0～23；参数minutes指定分钟的整数，范围为0～59；参数seconds指定秒的整数，范围为0～59；参数ms指定毫秒数，范围为0～999。参数year、month和day是必需的，其他参数是可选的。
注意：参数月份month值的范围为0～11。其中，0表示1月；1表示2月，以此类推。
2．时间日期时区化
由于地域不同，用户的时间日期数据都具有时区性。当Highcharts无法正确显示时间时，需要设置对应的时区。这时需要使用包含在global中的配置项。
（1）使用配置项useUTC，启用UTC功能。其语法如下：
useUTC: Boolean
该配置项的值为布尔类型。当值为true时，启用该功能；否则，禁用该功能。默认值为true。
（2）使用配置项timezoneOffset，设置由时区不同引起的时间差值。其语法如下：
timezoneOffset: Number
其中，参数Number指定以分钟为单位的时间差值。例如，我国作为东八区，其时间间隔为60*-8。
3．时间日期本地化
Highcharts默认使用英文，所以显示的月和星期都是英文单词。Highcharts的配置项lang包含3个子配置项用来设置这些英文单词。下面依次讲解。
（1）使用配置项months设置每个月的名称。其语法如下：
months: Array<String>
其中，参数Array<String>用于存储每个月的名称。默认值如下：
[ "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" , "November" , "December"]
对于国内用户，只需要将其设置为如下值即可：
months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月', '十一月','十二月']
（2）当显示空间有限时，Highcharts则会使用月份的简写代替完整写法。月份简写形式需要使用配置项shortMonths指定。其语法如下：
shortMonths: Array<String>
其中，参数Array<String>包含一年12个月的名称简写形式。默认值如下：
[ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"]
对于国内用户，需要将其设置为和months一样的值。代码如下：
shortMonths:['一月','二月','三月','四月','五月','六月','七月','八月','九月', '十月','十一月','十二月']
（3）Highcharts有时会按照英文星期显示日期。这个时候，需要使用配置项weekdays修改每个星期的名称。其语法如下：
weekdays: Array<String>
其中，参数Array<String>用于保存每个星期7天的名称。默认值如下：
["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
对于国内用户，需要设置为以下值：
weekdays:['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
4．显示格式
虽然用户使用的是时间戳形式赋值，但显示的时候Highcharts会自动转化成正常的时间日期格式。常见的日期格式有很多种，如年／月／日、日／月／年、月／日／年等。在国内大家使用最多的形式是年／月／日。由于Highcharts的自动转化形式往往不是我们所需要的，所以需要用户在显示的时候进行格式指定。
在Highcharts中，时间通常会显示在提示框和坐标轴上。这两个顶级配置项都提供相同的配置项dateTimeLabelFormats。其语法如下：
dateTimeLabelFormats: Object
其中，参数Object用来指定各种精度下时间显示的格式。默认值如下：
{
millisecond:"%A, %b %e, %H:%M:%S.%L",
second:"%A, %b %e, %H:%M:%S",
minute:"%A, %b %e, %H:%M",
hour:"%A, %b %e, %H:%M",
day:"%A, %b %e, %Y",
week:"Week from %A, %b %e, %Y",
month:"%B %Y",
year:"%Y"
}
其中，%Y、%B之类的标志用来表示各种时间的写法，详细说明如表2.2所示。
表2.2 常见格式字符串
【实例2-7：datedata】下面构建一个x值为时间日期类型数据的图表。其核心代码如下：
Highcharts.setOptions({
global: { //设置时区信息
useUTC: true,
timezoneOffset:60*-8
},
lang: { //设置日期本地化格式
months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
'九月', '十月', '十一月', '十二月'],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月'],
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五',
'星期六']
}
});
var options = {
chart: {
type: 'line'
},
title: {
text: '时间日期数据'
},
subtitle: {
text: '临时数据'
},
series: [{
data: [
[Date.UTC(2015, 5, 1), 54],
[Date.UTC(2015, 5, 7), 136],
[Date.UTC(2015, 5, 12), 189],
[Date.UTC(2015, 5, 20), 62],
[Date.UTC(2015, 5, 23), 43],
[Date.UTC(2015,5,29),143]
],
}],
xAxis: [{
type: 'datetime',
dateTimeLabelFormats: {
week: '%Y-%m-%e' //设置显示的时间格式
},
}],
执行代码后，效果如图2.7所示。
图2.7 时间日期数据图表
5．简化形式
如果对应的图表元素没有专有的配置项dateTimeLableFormat，用户也可以通过配置项format进行设置。参考形式如下：
format:'{value:String}'
其中，value表示原有的值；String表示格式字符串，可以是表2.2中的组合形式。
2.3.3 字符串数据
字符串数据也是图表中一种常用的数据类型。在图表中，字符串类型数据可能出现在x值、y值，或者其他辅助性信息中。当字符串数据作为x值或者y值时，需要用户特别注意。下面依次讲解这两种情况。
1．字符串数据作为x值
从严格意义来说，HIghcharts是不允许字符串作为x值的。在实际使用中，会把x值作为节点的名称name来使用。通过name值来生成x轴的坐标值。这时构建的x轴类型为分类类型。用户需要指定x轴的类型。代码如下：
xAxis:[{
type:'category'
}]
指定后，Highcharts就会读取数据节点中的name值，作为x轴坐标刻度。
【实例2-8：strdata】下面使用字符串数据构建一个图表。核心代码如下：
series: [{
data: [ //指定节点数据
['第一次', 92],
['第二次', 85],
['第三次', 89],
['第四次', 97],
['第五次', 91]
],
keys:['name','y'] //指定数据节点格式
}],
xAxis: [{
type: 'category', //设置分类类型
}],
执行代码后，效果如图2.8所示。从图表中可以看出，Highcharts自动将每个节点的第一个值作为x轴刻度进行显示。
图2.8 字符串构建的图表
这时，x轴的实际刻度数值为0、1、2、3、4。“第一次”的实际数值为0，“第二次”的实际数值为1，以此类推。如果数据节点中出现相同的name，Highcharts并不会认为是相同的，会按照不同的刻度来处理。
【实例2-9：strdata1】构建一个具有相同节点名称的图表。核心代码如下：
series: [{
data: [
['第一次', 92], //相同节点名称
['第二次', 85],
['第三次', 89],
['第四次', 97],
['第五次', 91],
['第一次',93] //相同节点名称
],
keys:['name','y']
}],
xAxis: [{
type: 'category',
}],
执行代码，效果如图2.9所示。从图中可以看到，“第一次”刻度在x轴出现了两次。在很多图表中，这样的数据节点是无法避免的。这个时候，就需要将节点名称和节点数据进行分离，这就是下面要讲解的内容。
图2.9 具有相同节点名称
2．简化节点赋值
当图表中存在多个数据列，并且每个数据列的节点的x值都是相同的，也可以在x轴的设置中直接指定由name构成的刻度。其代码如下：
xAxis:[{
type:'category',
categories:['第一次','第二次','第三次','第四次','第五次']
}]
这样做的结果就是将节点中的name和y值进行分离。
【实例2-10：strdatasimple】下面简化实例2-6的节点数据，重新构成图表。核心代码如下：
series: [{
data: [92, 85, 89, 97, 91] //简化的节点数据
}],
xAxis: [{
type: 'category',
categories:['第一次','第二次','第三次','第四次','第五次']//指定x轴刻度
}],
执行代码后，运行效果如图2.8所示。对于实例2-7的问题，这个时候也可以解决了。解决方法就是为节点指定Highcharts允许的x值。
【实例2-11：strdata2】下面解决实例3-7的问题。核心代码如下：
series: [{
data: [92, 85, 89, 97, 91,[0,93]] //指定最后一个节点的x值
}],
xAxis: [{
type: 'category',
categories:['第一次','第二次','第三次','第四次','第五次']
}]
执行代码后，效果如图2.10所示。从图中可以看到，“第一次”刻度上有两个节点了。虽然在折线图中很少遇到这种情况，但是在其他图表类型中经常会遇到这类问题。
图2.10 重复节点名称的解决
3．字符串作为y值
由于Highcharts不支持字符串作为y值，也不能将节点名称name解析到y轴上，所以只能采用实例2-9的方式进行转化。
【实例2-12：strdatay】将某同学的成绩表生成图表，其成绩如表2.3所示。其中x值是考试次数，成绩作为y值。
表2.3 某同学考试成绩
核心代码如下：
series: [{
data: [2, 1, 3, 2,3] //将字符串转化为刻度值
}],
yAxis: [{
type: 'category',
categories:['不及格','及格','良好','优秀'] //指定刻度
}],
xAxis: [{
type: 'category',
categories:['第一次','第二次','第三次','第四次','第五次']
}],
执行代码后，效果如图2.11所示。
图2.11 y值是字符串