Charts.js傳說超過查看價值

我使用charts.js 2.5，我沒有看到選項，更改傳說價值更多我的數據值。Charts.js傳說超過查看價值

在圖例高度值的例子是6，因爲我的日期值是6.我知道有選項「最大」，但我不想手動使用，因爲我的腳本是生成的。我如何自動添加到我的圖表上的範圍圖例。

Chart.plugins.register({ 
 
    afterDatasetsDraw: function(chartInstance, easing) { 
 
     // To only draw at the end of animation, check for easing === 1 
 
     var ctx = chartInstance.chart.ctx; 
 

 
     chartInstance.data.datasets.forEach(function (dataset, i) { 
 
      var meta = chartInstance.getDatasetMeta(i); 
 
      if (!meta.hidden) { 
 
       meta.data.forEach(function(element, index) { 
 
        if(dataset.data[index] !== undefined) { 
 
         // Draw the text in black, with the specified font 
 
         ctx.fillStyle = 'rgb(0, 0, 0)'; 
 

 
         var fontSize = 8; 
 
         var fontStyle = 'normal'; 
 
         var fontFamily = 'Helvetica Neue'; 
 
         ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 
 

 
         // Just naively convert to string for now 
 
         var dataString = dataset.data[index].toString(); 
 

 
         // Make sure alignment settings are correct 
 
         ctx.textAlign = 'center'; 
 
         ctx.textBaseline = 'middle'; 
 

 
         var padding = 5; 
 
         var position = element.tooltipPosition(); 
 
         ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 
 
        } 
 
       }); 
 
      } 
 
     }); 
 
    } 
 
}); 
 
var barChartData = { 
 
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
 
    datasets: [{ 
 
     label: "UC:NC ratio", 
 
     type:'line', 
 
     data: [6,6,6,6,6,6,6,6,0,0,0,0], 
 
     fill: false, 
 
     borderColor: '#0279cb', 
 
     backgroundColor: '#0279cb', 
 
     pointBorderColor: '#0279cb', 
 
     pointBackgroundColor: '#0279cb', 
 
     borderDash: [20, 30], 
 
     yAxisID: 'y-axis-1' 
 
    }, 
 
    { 
 
     label: "UC:NC ratio YTD", 
 
     type:'line', 
 
     data: [6,6,6,6,6,6,6,6,0,0,0,0], 
 
     fill: false, 
 
     borderColor: '#000000', 
 
     backgroundColor: '#000000', 
 
     pointBorderColor: '#000000', 
 
     pointBackgroundColor: '#000000', 
 
     yAxisID: 'y-axis-1' 
 
    }] 
 
}; 
 

 
window.onload = function() { 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    window.myBar = new Chart(ctx, { 
 
     showTooltips: false, 
 
     type: 'bar', 
 
     data: barChartData, 
 
     animation: false, 
 
     options: { 
 
      responsive: true, 
 
      legend: { 
 
       display: true, 
 
       position: 'bottom' 
 
      }, 
 
      tooltips: false, 
 
      elements: { 
 
       line: { 
 
        fill: false 
 
       } 
 
      }, 
 
      scales: { 
 
       xAxes: [{ 
 
        display: true, 
 
        gridLines: { 
 
         display: false 
 
        }, 
 
        labels: { 
 
         show: true, 
 
        } 
 
       }], 
 
       yAxes: [{ 
 
        type: "linear", 
 
        display: true, 
 
        stacked: false, 
 
        position: "left", 
 
        id: "y-axis-1", 
 
        gridLines:{ 
 
         display: false 
 
        }, 
 
        labels: { 
 
         show:true, 
 

 
        } 
 
       }] 
 
      } 
 
     } 
 
    }); 
 
};

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <script data-require="jquery" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
</head> 
 
<body style="background:#FFF;"> 
 
    <div style="width:700px;"> 
 
     <canvas id="canvas"></canvas> 
 
    </div> 
 
</body> 
 
</html>

來源

2017-03-22 Piotr Kazuś

我相信你在找什麼是ticks:{max:x}。將其添加到您的yAxes比例。

var chartInstance = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        max: 5, 
        min: 0, 
        stepSize: 0.5 
       } 
      }] 
     } 
    } 
});

編輯：如果你想有一個動態的最大值，你能確定你的數據集的最大價值，找到一個整數上方設置的百分比，以及最大y軸的設置爲該值。

var data = [1, 2, 3]; 
var newmax = Math.max(...data); 
newmax = Math.round(newmax*1.2);

，然後設置蜱最大等於newmax：

ticks:{max:newmax}.

來源

2017-03-22 13:02:18

當我使用最多的話，我必須在代碼中手動編寫最大值。我想自動更改範圍。我從xls獲取數據，而且我的數據不一樣。我想要更多的是我的數據值不低於。 –

然後將最大值設置爲等於您從數據集中確定的新變量，例如比最大值大20％。例如。 'var arr = [1，2，3]; var max = Math.max（... arr）; max = Math.round（max * 1.2）;'然後設置最大值等於'var max'： '蜱：{最大值：最大}'。 –

我在找！謝謝：） –

Charts.js傳說超過查看價值

回答

相關問題