highcharts做图第一篇，guage速度仪表展示网速

最新推荐文章于 2020-02-20 18:09:36 发布

凯功

最新推荐文章于 2020-02-20 18:09:36 发布

阅读量426

点赞数

分类专栏：报表 js插件文章标签： highcharts guage

本文链接：https://blog.csdn.net/q491978068/article/details/103494404

版权

本文介绍了如何使用Highcharts库创建一个Gauge类型的仪表盘，用于展示网络速度。通过动态传入数据，可以实时更新仪表盘上的数值，例如平均上传速度。配置包括设置图表类型、标题、背景、刻度、标签和颜色段等，以直观展示不同速度范围的颜色区分。

摘要由CSDN通过智能技术生成

可根据需求传入data进行动态赋值。

function drawSpeedChat(data) {
   var max = 5120;
   Highcharts.chart("speed_chart", {
       chart : {
           type : 'gauge',
           plotBorderWidth : 0,
           plotShadow : false

       },
       title : {
           text : '平均上传速度'
       },
       credits : {
           enabled : false
       },
       pane : {
           startAngle : -150,
           endAngle : 150,
           background : [ {
               backgroundColor : {
                   linearGradient : {
                       x1 : 0,
                       y1 : 0,
                       x2 : 0,
                       y2 : 1
                   },
                   stops : [ [ 0, '#FFF' ],