时间戳

首页 > 解决方案 > 如何将数据动态上传到活动量表中？

javascript - 如何将数据动态上传到活动量表中？

问题描述

如何将此表值传递给活动量表的数据？

我是使用 highcharts.js 的新手。我正在从数据库中生成一个表，其中有 2 列：风，值：70 和速度，值：80。这些值可以根据数据库进行更改。我可以从变量中的表中获取值。我想将此值传递给活动仪表图的系列数据部分。而不是硬编码的值数据：[70]，我希望这个活动量表将根据表值更新数据值。将不胜感激任何帮助。这是我的代码：

<html>
 <body>
   <div align = "center">
      <div>
         <h1>wind & speed </h1>
      </div>
        <div>
         <table id= "testTable" border="1" cellpadding="5">
            <tr>
               <th width="80">wind</th>
               <th width="80">speed</th>
            </tr>
            
            <tr>
               <td id="win">70</td>
               <td id="spd">80</td>
            </tr>
           
         </table>
      </div>
  </div>
  <div id="container" style="width: 580px; height: 400px; margin: 0 auto"></div>

  <script type="text/javascript">
     $(function() {
         var gaugeOptions = {
           chart: {
             type: 'solidgauge',
             margin: [0, 0, 0, 0],
             backgroundColor: 'transparent',
             events: {
                load: function() {
                   var chart = this,
                   counter = 0,
                   drawCircle = setInterval(function() {
                     if (++counter >= 1000) {
                        clearInterval(drawCircle);
                     }

                     renderCircle(chart);
                   }, 1);
                } 
              }
           },
           title: null,
           yAxis: {
             min: 0,
             max: 100,
             minColor: '#009CE8',
             maxColor: '#009CE8',
             lineWidth: 0,
             tickWidth: 0,
             minorTickLength: 0,
             minTickInterval: 500,
             labels: {
                enabled: false
             }
           },
           pane: {
             size: '70%',
             center: ['50%', '60%'],
             startAngle: -130,
             endAngle: 130,
             background: {
               borderWidth: 40,
               backgroundColor: '#DBDBDB',
               shape: 'arc',
               borderColor: '#DBDBDB',
               outerRadius: '90%',
               innerRadius: '90%'
             }
          },
          tooltip: {
            enabled: true
          },
          plotOptions: {
            solidgauge: {
              borderColor: '#009CE8',
              bo rderWidth: 40,
              radius: 90,
              innerRadius: '90%',
              dataLabels: {
                 y: 5,
                 borderWidth: 8,
                 borderRadius: '50%',
                 backgroundColor: '#E1E5EC',
                 useHTML: true
              }
            }
          },
          series: [{
            name: 'Wind',
            borderColor: Highcharts.getOptions().colors[0],
          //need to pass here wind value
            data: [70],
            animation: {
              duration: 1000
            },
            dataLabels: {
              format: '<div style="Width: 50px;text-align:center"><span style="font-size:30px;color:#009ce8">{y}</span></div>'
            }
          },
          {
            name: 'Speed',
            type: 'gauge',
       //need to pass here as speed 80 (data: [80])
            data: [80],
            dial: {
              backgroundColor: '#CC0000',
              rearLength: '-85%',
              baseLength: "100%",
              radius: "110%",
              overshoot: '5'
            },
            dataLabels: {
              enabled: true
            },
            pivot: {
              radius: 0
            }
         }],
         credits: {
            enabled: false
         }
      };

      $('#container').highcharts(gaugeOptions);
    });

   </script>
 </body>
</html>

标签： javascriptjquerymysqljsphighcharts

解决方案

推荐阅读