Chart.js - 設置最大Y軸值並保持步驟正確

我正在使用Chart.js 2.6。我有一個圖表，我已經添加了自定義分頁來瀏覽數據集，因爲它非常大。我的分頁和一切都很好，我只是抓住我的設置中的下一塊數據，並用新的數據對象更新chart.config.data，然後在圖表上調用.update（）。但是，爲了使圖表更有意義，我需要在用戶分頁時保持左側（Y軸）縮放比例相同。通常Chart.js會根據圖表中的數據重建它，但我希望它始終反映相同的值。Chart.js - 設置最大Y軸值並保持步驟正確

我已經將圖表的yAxes對象上的max值設置爲我的數據集中的最大值。我也將beginAtZero選項設置爲true，將maxTicksLimit設置爲10.但是，即使我的Yaxis保持不變，它並不總是看起來很棒（請參見下面的截圖）。在這個例子中，我的最大值在圖表中設置爲21,000。有沒有人有任何建議，我可以提供更好的最大值（根據數值四捨五入到最接近的5,000,500,100等），或者以某種方式讓它創建Y軸，而不用像前面那樣處理頂部數字它現在呢？

這裏是我目前使用於確定最大數據值設定爲圖中的Yaxes對象最大值的函數。 plugin.settings.chartData變量表示圖表中使用的數據值的數組。我試圖讓它根據maxValue是什麼正確地增加到下一個1000,500等，但正如你所看到的，我的數學不正確。在截圖示例中，maxValue返回爲20,750，我的函數將其舍入到21,000。在這個例子中，它應該將它四捨五入到下一個25,000的增量。

var determineMaxDataValue = function() { 
    var maxValue = Math.max.apply(Math, plugin.settings.chartData); 
    var step = maxValue > 1000 ? 1000 : 500; 
    plugin.settings.maxDataValue = (Math.ceil(maxValue/step) * step);    
};

來源

2017-07-03 Phil

想通了。我沒有像以前那樣在Y軸上提供最大值，而是實現了afterBuildTicks回調，並更新了滴答以獲得正確的增量。

yAxes: [{ 
          afterBuildTicks: function(scale) { 
           scale.ticks = updateChartTicks(scale); 
           return; 
          }, 
          beforeUpdate: function(oScale) { 
           return; 
          }, 
          ticks: {  
           beginAtZero:true, 
           //max:plugin.settings.maxDataValue, 
           maxTicksLimit: 10 
          } 
         }]

我的updateChartTicks函數遍歷現有的刻度並確定刻度之間的正確增量。然後，我使用該值添加我的最終「標記」，該標記始終大於數據集中的最大數據。

var updateChartTicks = function(scale) { 
      var incrementAmount = 0; var previousAmount = 0; var newTicks = []; 
      newTicks = scale.ticks; 
      for (x=0;x<newTicks.length;x++) { 
       incrementAmount = (previousAmount - newTicks[x]); 
       previousAmount = newTicks[x]; 
      } 
      if (newTicks.length > 2) { 
       if (newTicks[0] - newTicks[1] != incrementAmount) { 
        newTicks[0] = newTicks[1] + incrementAmount;      
       } 
      }   
      return newTicks;    
     };

來源

2017-07-03 16:09:50 Phil

我也有同樣的問題。您無需編寫任何特殊函數來確定Yaxes中的最大值。使用'suggestedMax'設置。相反，爲了在圖表中將「max」設置爲最大值，請將suggestMax設置爲圖形中的最大值。如果你已經設置了「stepsize」，這將無法工作。

options: { 
scales: { 
    yAxes: [{ 
    ticks: { 
    suggestedMax: maxvalue+20 
    } 
    }] 
    } 
}

20被添加，所以最大值的工具提示將清晰可見。請參考http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

來源

2017-10-30 05:24:10 Vidya

Chart.js - 設置最大Y軸值並保持步驟正確

回答

相關問題