Question

如果超出比例界限，我怎么能隐藏线（在chartjs 2.x中）？

我遇到了这个问题/答案： 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>

是否有一种解决方案可以防止在规模边界之外进行绘制？

Answer 1

快速解决您的问题是删除在图表表面之外绘制的所有内容。

以下插件可以帮助您：

var AppDispatcher = new Flux.Dispatcher();

检查updated fiddle here及其结果：

如何在chartjs 2.0中隐藏min / max（比例区域）之外的线？

1 个答案: