与えられた開始角度と終了角度の間の特定の部分をchart.jsの円グラフで塗りつぶすことはできますか？

Question

私は開始角度と終了角度を渡すことができ、その間にある部分が何らかの色で塗りつぶされる円形のグラフが必要です。 chart.js円グラフで可能ですか？そして、そのような種類の機能を与えている他のチャートはありませんか？

ご協力いただければ幸いです。

Answer 1

ハイチャートの円グラフを使用して、あなたのポイントに渡す開始角度と終了角度に応じてチャートを塗りつぶすカスタム関数を書き込むことができます。

あなたのデータは、そのように見えることがあります。私は非常に簡単な例を作った

function(chart) { 
    var series = chart.series[0], 
     start = series.data[0].startAngle, 
     updatedData = [start], 
     pointBetween, 
     point; 
    Highcharts.each(series.data, function(p) { 
     pointBetween = p.startAngle - start; 
     if (pointBetween !== 0) { 
     updatedData.push({ 
      y: p.startAngle - start 
     }); 
     } 
     point = { 
     color: p.color, 
     y: p.endAngle - p.startAngle 
     } 
     updatedData.push(point); 
     start = p.endAngle; 
    }); 
    updatedData.push({ 
     y: 360 - start 
    }) 
    series.setData(updatedData); 
    } 

チャートはこれで見えるかもしれ様子：

data: [{ 
    startAngle: 0, 
    endAngle: 105, 
    color: 'green' 
    }, { 
    startAngle: 315, 
    endAngle: 360, 
    color: 'green' 
    }] 

そして、あなたのカスタム関数は、この関数に類似していてもよいです機能：

http://jsfiddle.net/46vfygqu/