2016-07-28 8 views
2

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

enter image description here

+0

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

答えて

2

私は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度線を描画し、そのを使用しています。この変更に伴い

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

+0

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