如何在chartjs 2.0中隱藏min/max（比例尺區域）之外的線條？

我怎樣才能隱藏行（在chartjs 2.x）儘快它超出了規模限制？如何在chartjs 2.0中隱藏min/max（比例尺區域）之外的線條？

我遇到過這個問題/回答： How do I hide values past the x-axis in chartjs 2.0? 在那裏，他們會過濾所有點的邊界以外的邊界。但是，如果你在最小/最大值上有一個點，並且該線的曲線（如果有的話）不正確，那麼這隻會起作用。在我的情況下，min和/或max並不總是一個點，line也是彎曲的。我有一個情況是這樣的jsfiddle： https://jsfiddle.net/gyotsv07/1/

<html><head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex, nofollow"> 
    <script type="text/javascript" src="/js/lib/dummy.js"></script> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
</head> 
<body><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe> 
    <canvas id="canvas" height="566" style="display: block; width: 849px; height: 566px;" width="849"></canvas> 
<script> 
var ctx = document.getElementById("canvas").getContext("2d"); 
/* 
var cleanOutPlugin = { 
    beforeInit: function(chart) { 
     // Replace `ticks.min` by `time.min` if time-type chart 
     var min = chart.config.options.scales.xAxes[0].ticks.min; 
     // Same here with `ticks.max` 
     var max = chart.config.options.scales.xAxes[0].ticks.max; 
     var ticks = chart.config.data.labels; 
     var idxMin = ticks.indexOf(min); 
     var idxMax = ticks.indexOf(max); 

     if (idxMin == -1 || idxMax == -1) 
      return; 

     var data = chart.config.data.datasets[0].data; 

     data.splice(idxMax + 1, ticks.length - idxMax); 
     data.splice(0, idxMin); 
     ticks.splice(idxMax + 1, ticks.length - idxMax); 
     ticks.splice(0, idxMin); 
    } 
}; 

Chart.pluginService.register(cleanOutPlugin);*/ 
var scatterChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
     datasets: [{ 
      label: 'Scatter Dataset', 
      data: [{ 
       x: -10, 
       y: 0 
      }, { 
       x: 0, 
       y: 6 
      }, { 
       x: 10, 
       y: 5 
      }] 
     }] 
    }, 
    options: { 
     scales: { 
      xAxes: [{ 
       type: 'linear', 
       position: 'bottom', 
       ticks: { 
        min: -5, 
        max: 5 
       } 
      }] 
     } 
    } 
}); 
</script> 
</body></html>

是有一個解決方案，以防止水垢boundries外畫什麼？

來源

2016-11-01 Doomic

快速解決您的問題是刪除在圖表表面外繪製的所有內容。

以下插件可以幫助你做這件事：

Chart.plugins.register({ 
    beforeDatasetsDraw: function(chartInstance) { 
     var ctx = chartInstance.chart.ctx; 
     var chartArea = chartInstance.chartArea; 
     ctx.save(); 
     ctx.beginPath(); 

     ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); 
     ctx.clip(); 
    }, 
    afterDatasetsDraw: function(chartInstance) { 
     chartInstance.chart.ctx.restore(); 
    }, 
});

檢查updated fiddle here其結果是：

來源

2016-11-02 13:56:13 tektiv

這是完美的。謝謝！ – Doomic

如何在chartjs 2.0中隱藏min/max（比例尺區域）之外的線條？

回答

相關問題