3.3 绘图区

绘图区是Highcharts图表的最重要区域。所有的图表图形都绘制在该区域中。整个绘图区由背景和边框两大部分组成。本节详细讲解绘图区的设置。

3.3.1 绘图区的边框

在Highcharts的默认设置中，只有坐标轴x和y可以显示绘图区的左边界和下边界。为了方便用户识别区域，也可以指定绘图区的边框。这样，可以更明确体现图表图形的范围。

1．绘图区边框宽度plotBorderWidth

配置项plotBorderWidth用来设置绘图区的边框宽度。默认宽度为0，所以在前面的实例中都看不到边框线。其语法如下：

plotBorderWidth:Number

其中，Number参数用来指定边框线的宽度，单位为px。

【实例3-8：plotBorderWidth】下面我们为实例1-1的图表绘图区添加宽度为1px的边框线。修改的代码如下：

chart: {
    type: 'line',
    borderWidth: 1,
    plotBorderWidth: 1                              //设置边框线宽度为1
},

执行代码后，效果如图3.11所示。在图中，只标出了绘图区上边缘和右边缘的线。实际绘图区的左边缘和下边缘也有类似的边框线，只是被坐标轴覆盖，所以无法显示。当用户设置的borderWidth值较大时，就可以显示出左侧边框和底端边框。

图3.11 绘图区的边框线

2．边框线的颜色plotBorderColor

从图3.11中可以看到，边框线已经显示出来，并且具有一定的颜色。绘图区边框线默认的颜色为#C0C0C0。开发者也可以使用配置项plotBorderColor设定。其语法形式如下：

plotBorderColor:Color

其中，Color参数用来指定边框线的颜色。

【实例3-9：plotBorderColor】修改实例3-8的代码，把绘图区边框的颜色设置为黑色。修改代码如下：

chart: {
    type: 'line',
    borderWidth: 1,
    plotBorderWidth: 2,                                         
    plotBorderColor:'#000000'                           //设置边框线颜色为#000000
},

执行代码后，效果如图3.12所示。这里为了让边框线颜色更明显，将边框线的宽度设置为2px。这时，就可以明显看出绘图区4个边缘的边框线。

图3.12 设置为黑色的边框线

3.3.2 绘图区的背景

绘图区是图表图形展现的最重要的舞台。通过设置合理的背景，可以帮助用户更好地识别数据。Highcharts提供背景颜色和背景图案两种方式来美化绘图区。

1．绘图区背景颜色plotBackgroundColor

为了明确绘图区的范围，不仅可以绘制边框线，还可以为绘图区设置背景颜色。这时需要使用配置项plotBackgroundColor。其语法形式如下：

plotBackgroundColor:Color

其中，Color用来指定绘图区的颜色值。

【实例3-10：plotBackgroundColor】修改实例1-1，为绘图区添加灰色背景。修改代码如下：

chart: {
    type: 'line',
    borderWidth: 1,
    plotBackgroundColor:'#C0C0C0'                               //设置绘图区背景色
},

执行代码后，效果如图3.13所示。从图中可以看到，绘图区已经被填充灰色。在这里，还可以指定渐变色。我们将在后面的章节中进行讲解。

图3.13 绘图区背景色

2．绘图区背景图片plotBackgroundImage

在chart组件中，用户不仅可以通过设置背景色美化绘图区，还可以为绘图区设置背景图片。这时需要通过属性plotBackgroundImage设置。其语法如下：

plotBackgroundImage:String

其中，String参数指定图片文件的URL地址。

【实例3-11：plotBackgroundImage】修改实例3-10，将绘图区的背景改成渐变色图片back.png。修改代码如下：

chart: {
    type: 'line',
    borderWidth: 1,
    plotBackgroundImage:'back.png'                              //设置背景图片
},

执行代码后，效果如图3.14所示。从图中可以发现，背景图片被拉伸直至和绘图区重合。所以，使用背景图片时需要注意背景图片变形问题，避免影响美观。

图3.14 设置绘图区的背景图片