Highcharts网页图表制作实例详解 (Web开发典藏大系)
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.6 图例扩展功能

在图例的原有基础上，用户还可以进一步扩展图例的功能。本节详细讲解常见的图例扩展功能。

5.6.1 在图例中显示节点数值

由于图例的位置固定，并且较为醒目。所以，在图例元素后面显示对应数据列节点数值也是一种很好的数据展现方式。实现该功能，用户可以借助Highcharts的第三方插件VALUE-IN-LEGEND实现。该插件下载地址为http://www.highcharts.com/plugin-registry/single/10/Value-In-Legend。下面讲解该插件的使用方式。

【实例5-17：valueinlegend】下面将在图例元素后显示鼠标所在节点的值。操作过程如下所述。

（1）下载该插件，解压获得其中的脚本文件value-in-legend.js。

（2）将该脚本文件引入当前网页中。代码如下：

<script src="value-in-legend.js"></script>

（3）通过配置项labelFormat定制图例文本标签文本格式，代码如下：

legend: {
    labelFormat:'{name}:{point.y}'
},

其中，point.y就是引入插件后，支持的属性。执行代码后，运行效果如图5.32所示。当鼠标移动到对应的节点上，该数据列对应的图例项目后就显示该节点的数值。

图5.32 在图例中显示节点数值

5.6.2 可拖动图例

当图表中包括多个数据列的时候，浏览者往往需要花费大量的时间用于将图例元素和数据列进行对应。这个时候，如果将图例设置为可拖动方式，就可以大大方便浏览者。用户可以通过Highcharts的第三方插件Draggable-Legend实现这个功能。该插件下载地址为http://www.highcharts.com/plugin-registry/single/4/Draggable-Legend。该插件为顶级配置项legend添加了一个新的配置项draggable，其语法如下：

draggable: Boolean

该配置项的值为布尔类型。当值为true时，启用图例的拖动功能；否则，则禁用拖动功能。

【实例5-18：draglegend】下面实现图例的可拖动功能。操作过程如下所述。

（1）下载插件Draggable-Legend，并解压。获取其中的脚本文件draggable-legend.js。

（2）将该脚本文件引入当前网页中。代码如下：

<script src="draggable-legend.js"></script>

（3）在网页中启用图例的悬浮状态和可拖动功能。代码如下：

legend: {
    floating: true,                             //设置图例悬浮状态
    draggable: true,                            //启用可拖动功能
    title: {
        text:'可拖动'
    }
}

为了便于拖动，为图例添加一个表格。执行代码后，效果如图5.33所示。这时，图例显示图表底端。用鼠标按住“可拖动”标题，就可以将图例拖动到图表中的任何位置，如图5.34所示。

图5.33 图例的初始位置

图5.34 拖动后的图例

5.6.3 根据图例高度扩展图表高度

当图例区不处于浮动状态下，图例区会占用图表空间。如果图表中数据列较多，会占用大量图表空间，从而压缩绘图区的空间。由于很多时候，图例元素的数量不固定，所以很难预测图例区所占用的空间。为了解决这个问题，用户可以采用第三方插件Adapt-Chart-To-Legend。该插件会自动计算图例区的高度，并扩展当前图表区的高度。它为顶级配置项legend添加了一个配置项adjustChartSize。其语法如下：

adjustChartSize:Boolean

该配置项的值为布尔类型。当值为true时，启用该功能。否则，禁用该功能。默认值为true。该插件下载地址为https://github.com/highslide-software/adapt-chart-to-legend/archive/master.zip。

【实例5-19：adjustheight】下面为图表启用根据图例区高度，动态调整图表高度的功能。操作过程如下所述。

（1）下载该插件，并解压。获取其中的脚本文件adapt-chart-to-legend.js。

（2）在当前网页中引入该文件，代码如下：

<script src="adapt-chart-to-legend.js"></script>

（3）在图表区域中添加多个数据列，代码如下：

series: [{
    data: [20, 35, 42, 21, 37, 34]
}, {
    data: [36, 20, 22, 29, 35, 36]
}, {
    data: [15, 19, 25, 32, 17, 19]
}, {
    data: [21, 26, 21, 32, 27, 28]
}, {
    data: [35, 28, 25, 22, 17, 24]
} ,{
    data: [21, 19, 23, 29, 24, 29]
}],

执行代码后，效果如图5.35所示。

图5.35 不启用动态调整功能

（4）启用动态调整功能。代码如下：

legend: {
    adjustChartSize: true
}

执行代码后，效果如图5.36所示。对比两个图，可以明显看出启用动态功能后，图表的高度增加了。

图5.36 启用动态调整功能

上一章目录下一章