を使用してゲージを実装しようとしていGauge.js
ます。グラデーションカラーで実装したい。
これを実装するにはいくつかの問題に直面しています。
現在実装されているゲージのスクリーンショット:
1) グラデーションカラーが機能しない
私のスクリプト:
<script type="text/javascript">
var opts = {
lines: 30, // The number of lines to draw
angle: 0.3, // The length of each line
lineWidth: 0.1, // The line thickness
pointer: {
length: 0.9, // The radius of the inner circle
strokeWidth: 0.035 // The rotation offset
},
limitMax: true, // If true, the pointer will not go past the end of the gauge
colorStart: '#64A9CC', // Colors
colorStop: '#F6735E', // just experiment with them
strokeColor: '#000000', // to see which ones work best for you
generateGradient: 'true'
};
var target = document.getElementById('gauge'); // your canvas element
var gauge = new BaseDonut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(50); // set actual value
</script>
また、カーブが少しぼやけているように見えます。何か提案はありますか?