FlotCharts：ストライプラインのバー

ソリッドカラーではなく、バーのストライプラインを表示できますか？例えばFlotCharts：ストライプラインのバー

：

2016-07-28 Burak Özdemir

Flotはこれをサポートしていません。単色と垂直[グラデーション]（https://github.com/flot/flot/blob/master/API.md#specifying-gradients）のみをサポートしています。 – Raidri

私はflotが本当にユーザーだけではなく、色やグラデーションの塗りつぶしを生成する関数を指定できるようにするために、ここでチャンスを逃したと思います。コードhereを簡単に修正してプルリクエストを作成しました（ただし、flot githubは放棄されているようですので、リクエストを受け入れる人はいないと思います）。ここで

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <script data-require="[email protected]" data-semver="0.8.2" src="https://rawgit.com/larsenmtl/flot/master/jquery.flot.js"></script> 
 
</head> 
 

 
<body> 
 
    <canvas id="pattern" width="20" height="20" style="display:none"></canvas> 
 
    <div id="placeholder" style="width:600px;height:300px;"></div> 
 
    <script> 
 
    $(function() { 
 
     
 
     var p_can = $('#pattern').get(0), 
 
     p_ctx = p_can.getContext('2d'); 
 
     p_ctx.beginPath(); 
 
     p_ctx.moveTo(0,0); 
 
     p_ctx.lineTo(20,20); 
 
     p_ctx.stroke(); 
 

 
     var d1 = [ 
 
     [0, 1], 
 
     [2, 8], 
 
     [4, 5] 
 
     ]; 
 

 
     $.plot($("#placeholder"), [{ 
 
     data: d1, 
 
     bars: { 
 
      show: true, 
 
      fill: function(a,b) { 
 
      var ctx = $('#placeholder>canvas').get(0).getContext('2d'); 
 
      return ctx.createPattern(p_can, 'repeat'); 
 
      } 
 
     } 
 
     }], { }); 
 

 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

私は、追加のcanvas要素を作成する45度線を描画し、そのを使用しています。この変更に伴い

、あなたはこのようなバーは「ストリップ」をすることができますバーの塗りつぶしパターンを作成します。

出典

2016-08-20 17:01:29 Mark

それはかなりいいね:) –

FlotCharts：ストライプラインのバー

答えて

関連する問題