2017-08-11 15 views
0

Chartjs 2プラグインで描かれた線をカスタマイズしようとしていますが、さらに助けが必要です。私はラインの幅を縮小し、左に幅を広げて、セットアップにうまく収まりたいと思っています。カスタムChartjs水平線の高さを縮め、線幅を広げる方法は?

私の現在の設定は次のようになります。

enter image description here

この外観を担当していたコードはここにある:

Chart.pluginService.register({ 
    afterDraw: function(chart) { 
     if (typeof chart.config.options.lineAt != 'undefined') { 
      var lineAt = chart.config.options.lineAt; 
      var ctxPlugin = chart.chart.ctx; 
      var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id]; 
      var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id]; 

      if(yAxe.min != 0) return; 

      ctxPlugin.strokeStyle = "#14646F"; 
      ctxPlugin.beginPath(); 
      lineAt = (lineAt - yAxe.min) * (100/yAxe.max); 
      lineAt = (100 - lineAt)/100 * (yAxe.height) + yAxe.top; 
      ctxPlugin.moveTo(xAxe.left, lineAt); 
      ctxPlugin.lineTo(xAxe.right, lineAt); 
      ctxPlugin.stroke(); 

     } 
    } 
}); 

誰も私が変更したり、内部に追加する必要が何を知っていますctxPlugin?私は次の行を発見

EDITは、線の幅を増加させます。ゼロ値は 'xAxe.left'を上書きしました。

ctxPlugin.moveTo(0, lineAt); 

答えて

0

私はこのプラグインを使用してCanvasRenderingContext2Dオブジェクトを処理していることが分かりました。その事実に気づくのは良いことです。 http://html5index.org/Canvas%20-%20CanvasRenderingContext2D.htmlは、このオブジェクトが処理できるすべての変数/メソッドのリストを表示します。私の場合は次の行は、私を助け:

ctxPlugin.lineWidth = 1; 
ctxPlugin.moveTo(0, lineAt); 

がうまくいけば、これはまた、あなたがChart.jsで何かをカスタマイズすることができます!

関連する問題