JS Center-Zeroedゲージチャート

私はビルドしていたWebアプリケーションにHighchartsを使用してきました。しかし、今、私はこのようになりますいくつかのデータのためのゲージを作成する使命を帯びてきた：JS Center-Zeroedゲージチャート

をそして私は素晴らしいが、それから塗りつぶし（中心ゼロ化されたゲージをレンダリングする任意のチャートライブラリを見つけることができません針が揺れているところまで）。

ライブラリやカスタム実装に関する推奨事項はありますか？

は（PSは、私はそれをベースにする必要がある例のゲージはPDFレポート、リバースエンジニアリング何のようにチャンスがないからであることを）ここで

出典

2016-09-14 Jakob

あなたがで遊ぶことができるものです。https://jsfiddle.net/remisture/pb70kduv/5/

はこれがあります

http://www.highcharts.com/demo/gauge-speedometer

http://www.highcharts.com/demo/gauge-solid

：これら二つを組み合わせて行わ

$(function() { 
var settings = { 
gaugeMinValue : 0, 
gaugeMaxValue : 8000, 
gaugeStartValue : 3000, 
gaugeStartAngle : -90, 
gaugeEndAngle : 90, 
gaugeUpdateInterval : 500 // ms 
}; 

var options = { 
tooltip : { 
    enabled : false 
}, 
chart : { 
    type : 'gauge', 
    backgroundColor : 'rgba(255, 255, 255, 0)', 
    plotBackgroundColor : null, 
    plotBackgroundImage : null, 
    plotBorderWidth : 0, 
    plotShadow : false, 
    spacing : [5, 30, 5, 30], 
    style : { 
    fontSize : '1em' 
    } 
}, 

title : false, 

pane : { 
    startAngle : settings.gaugeStartAngle, 
    endAngle : settings.gaugeEndAngle, 
    background : { 
    backgroundColor : 'rgba(255, 255, 255, 0)', 
    borderWidth : 0, 
    innerRadius : '60%', 
    outerRadius : '100%', 
    shape : 'arc' 
    } 
}, 

plotOptions : { 
    gauge : { 
    /*dial: { 
    radius: 0 
    }, 
    pivot: { 
    radius: 0 
    },*/ 
    dataLabels : { 
     borderWidth : 0, 
     padding : 0, 
     verticalAlign : 'middle', 
     style : false, 
     formatter : function() { 
     var output = '<div class="gauge-data">'; 
     output += '<span class="gauge-value">' + this.y + '</span>'; 
     output += '</div>'; 

     return output; 
     }, 
     useHTML : true 
    } 
    }, 
    pie : { 
    dataLabels : { 
     enabled : true, 
     distance : -10, 
     style : false 
    }, 
    startAngle : settings.gaugeStartAngle, 
    endAngle : settings.gaugeEndAngle, 
    center : ['50%', '50%'], 
    states : { 
     hover : { 
     enabled : false 
     } 
    } 
    } 
}, 

// the value axis 
yAxis : { 
    offset : 0, 
    min : settings.gaugeMinValue, 
    max : settings.gaugeMaxValue, 

    title : false, 

    minorTickWidth : 0, 

    tickPixelInterval : 30, 
    tickWidth : 2, 
    tickPosition : 'outside', 
    tickLength : 14, 
    tickColor : '#ccc', 
    lineColor : '#ccc', 
    labels : { 
    distance : 28, 
    rotation : "0", 
    step : 2, 
    }, 

    plotBands : [{ 
    thickness : 10, 
    outerRadius : "112%", 
    from : 0, 
    to : 2500, 
    color : '#FB8585' // red 
    }, { 
    thickness : 10, 
    outerRadius : "112%", 
    from : 2500, 
    to : 5500, 
    color : '#F9E7AE' // yellow, 
    }, { 
    thickness : 10, 
    outerRadius : "112%", 
    from : 5500, 
    to : 8000, 
    color : '#83DAD9' // green 
    }] 
}, 

series : [{ 
    type : 'gauge', 
    data : [settings.gaugeStartValue], 
}, { 
    type : 'pie', 
    innerSize : '87%', 
    data : [{ 
    y : settings.gaugeStartValue, 
    name : "", 
    color : "#0bbeba" 
    }, { 
    y : settings.gaugeMaxValue - settings.gaugeStartValue, 
    name : '', 
    color : "#666666" 
    }] 
}], 

navigation : { 
    buttonOptions : { 
    enabled : false 
    } 
}, 

credits : false 
}; 

$('#gauge1').highcharts(options, buildGraph); 

function buildGraph(chart) { 
if (!chart.renderer.forExport) { 
    setInterval(function() { 
    var gaugePoint = chart.series[0].points[0], 
     piePoint = chart.series[1], 
     newVal, 
     inc = Math.round((Math.random() - 0.5) * 1500); 

    newVal = gaugePoint.y + inc; 
    if (newVal < settings.gaugeMinValue || newVal > settings.gaugeMaxValue) { 
     newVal = gaugePoint.y - inc; 
    } 

    // Update number gauge value 
    gaugePoint.update(newVal); 

    // Update pie with current value 
    piePoint.points[0].update(newVal); 
    piePoint.points[1].update(settings.gaugeMaxValue - newVal); 

    }, settings.gaugeUpdateInterval); 
    } 
    } 
    });

出典

2016-09-14 11:49:53

JS Center-Zeroedゲージチャート

答えて

関連する問題