[英]Can't figure out how to skip first datapoint on the x-axis and labels on X-axis skip second-to-last datapoint with Chart.js
我在 Chart.js 中遇到了一個問題，我的 X 軸上的第一個標簽太靠近 Y 軸，所以我想跳過第一個數據標簽，以便第一個可見的標簽是 30。此外，我的間隔一般以 30 為增量跳過，但 x 軸上的最后一個間隔增加了 59。我該如何解決這個問題？ 我看到奇怪的標簽 (1,31,61...,301,360) 並希望看到 (30,60,90,...,330,360)，但無法從文檔中弄清楚。
只要其他點的基礎數據保留在那里，我也可以將 x 軸標簽硬編碼為 ["",30,60,90,...360]。
var x_vals = []; var y_vals = []; for (var i = 1; i < 361; i++) { x_vals.push(i); y_vals.push(1000 - i); } var obj = { "chart_type": "line", "x_values": x_vals, "series_name": "whatever", "y_values": y_vals, "chart_title": "Something", }; createSingleChartFromObj("chart1", obj); // for a single-y-axis function createSingleChartFromObj(canvasID, obj) { let myChart = document.getElementById(canvasID).getContext('2d'); //getContext is for canvas var massPopChart = new Chart(myChart, { type: obj['chart_type'], data: { labels: obj['x_values'], datasets: [{ label: obj['series_name'], data: obj['y_values'] }] }, options: { title: { display: true, text: obj['chart_title'], }, scales: { yAxes: [{ scaleLabel: { display: true, labelString: obj['series_name'] }, ticks: { userCallback: function(value, index, values) { if (parseInt(value) < 1000) { return value.toFixed(2).replace(/\\d(?=(\\d{3})+\\.)/g, '$&,'); } else { // https://stackoverflow.com/questions/38800226/chart-js-add-commas-to-tooltip-and-y-axis return value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } } } }], xAxes: [{ beginAtZero: false, display: true, gridLines: false, ticks: { autoSkip: true, maxTicksLimit: 12 }, color: 'black' }] }, showLines: true } }) }
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col" id="graph1"> <canvas width="100" height="100" id="chart1"></canvas> </div> </div> </div> </body> </html>
我的代碼在JS Fiddle
更少的數據點可以解決很多問題：
var x_vals = [];
var y_vals = [];
for (var i=0;i<=360;i++) {
if ((i % 30) == true) {
x_vals.push(i-1);
y_vals.push(1000-i-1);
}
}
可能是 ChartJS 試圖計算太多點......
d3.js條形圖排序：無法確定如何對x軸標簽和條形進行排序
[英]d3.js bar chart sorting: can't figure out how to sort x-axis labels along with bars
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.