如何縮小高度並增加自定義Chartjs水平線的線寬？

我正在嘗試自定義用Chartjs 2插件繪製的一條線，但我需要進一步的幫助。我想縮小線條的寬度並將寬度增加到左邊，使其適合我的設置。如何縮小高度並增加自定義Chartjs水平線的線寬？

我目前的設置是這樣的：

，負責這個樣子的代碼是在這裏：

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);

來源

2017-08-11 Klyner

我發現使用這個插件我正在處理一個CanvasRenderingContext2D對象。意識到這一點很好。 http://html5index.org/Canvas%20-%20CanvasRenderingContext2D.html顯示了這個對象可以處理的所有變量/方法的列表。在我的情況下，下一行幫助我：

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

希望這也可以幫助您使用Chart.js自定義某些內容！

來源

2017-08-11 09:48:44 Klyner

如何縮小高度並增加自定義Chartjs水平線的線寬？

回答

相關問題