Highcharts 音量表
阿新 • • 發佈：2019-01-06
一 程式碼
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 音量表</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { // 型別為測量圖 type: 'gauge', plotBorderWidth: 1, plotBackgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, '#FFF4C6'], [0.3, '#FFFFFF'], [1, '#FFF4C6'] ] }, plotBackgroundImage: null, height: 200 }; var credits = { enabled: false }; var title = { text: '音量表（VU Meter）' }; var pane = [{ startAngle: -45, // 開始度數 endAngle: 45, // 結束度數 background: null, center: ['25%', '145%'], size: 300 }, { startAngle: -45, // 開始度數 endAngle: 45, // 結束度數 background: null, center: ['75%', '145%'], size: 300 }]; var yAxis = [{ min: -20, max: 6, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 6, color: '#C02316', innerRadius: '100%', outerRadius: '105%' }], pane: 0, title: { text: 'VU<br/><span style="font-size:8px">Channel A</span>', y: -40 } }, { min: -20, max: 6, minorTickPosition: 'outside', tickPosition: 'outside', labels: { rotation: 'auto', distance: 20 }, plotBands: [{ from: 0, to: 6, color: '#C02316', innerRadius: '100%', outerRadius: '105%' }], pane: 1, title: { text: 'VU<br/><span style="font-size:8px">Channel B</span>', y: -40 } }]; var plotOptions = { gauge: { dataLabels: { enabled: false }, dial: { radius: '100%' } } }; var series= [{ data: [-20], // 初始化資料 yAxis: 0 }, { data: [-20], // 初始化資料 yAxis: 1 }]; var json = {}; json.chart = chart; json.credits = credits; json.title = title; json.pane = pane; json.yAxis = yAxis; json.plotOptions = plotOptions; json.series = series; // 動態效果 var chartFunction = function (chart) { setInterval(function () { if (chart.series) { // the chart may be destroyed var left = chart.series[0].points[0], right = chart.series[1].points[0], leftVal, rightVal, inc = (Math.random() - 0.5) * 3; leftVal = left.y + inc; rightVal = leftVal + inc / 3; if (leftVal < -20 || leftVal > 6) { leftVal = left.y - inc; } if (rightVal < -20 || rightVal > 6) { rightVal = leftVal; } left.update(leftVal, false); right.update(rightVal, false); chart.redraw(); } }, 500); }; $('#container').highcharts(json, chartFunction); }); </script> </body> </html>
二 執行結果
