FlotCharts：条纹线条

显示条纹条纹而不是纯色可能吗？FlotCharts：条纹线条

例如：

2016-07-28 Burak Özdemir

Flot不支持此功能，它仅支持纯色和垂直[渐变]（https://github.com/flot/flot/blob/master/API.md#specifying-gradients）。 – Raidri

我觉得真的flot错过了机会，在这里允许用户指定一个函数产生填充，而不只是颜色或渐变。我对代码here做了一个简单的修改，并创建了一个pull请求（虽然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：条纹线条

回答

相关问题