動態更改刻度值，c3js

我在c3js中有一個條形圖，在x軸上使用類別刻度。蜱值I要顯示的在加載圖表設置：動態更改刻度值，c3js

axis: { 
     x: { 
     tick:{ 
      rotate: -35, 
      values: getTicks(displayData), //Return the tick values 
      multiline:false 
     }, 
     type: 'categorized' 
     } 
    }

其原因手動設置上負載的蜱，是我需要更新它們。

我需要允許用戶動態更新x軸範圍，而不需要加載新的數據，我希望顯示的刻度數保持不變，但顯然有不同的值。

要更改x軸的範圍內，我用這個函數：

chart.axis.range({min: {x: minRange}, max: {x: maxRange}});

沒有名爲chart.axis.values功能。有關如何動態更改刻度值的任何想法？

編輯 - 要真的清楚，我不希望更新圖表的值。這包括x和y軸的值。我只想改變顯示的刻度。

來源

2015-12-06 JasTonAChair

我改變在X軸上的刻度值這樣

chart.x([ 50, 60, 170, 230, 300, 350])//set new x axis ticks

工作實施例here

EDIT

更新值可以這樣來完成：

chart.load({ 
     columns: [ 
      ['data1', 100, 250, 150, 200, 100, 350] 
     ] 
    });

工作示例here

希望這有助於！

來源

2015-12-06 11:04:45 Cyril

謝謝，但這並不解決問題。爲了澄清，我不想更新x軸本身，我只想改變顯示的值。那有意義嗎？ – JasTonAChair

謝謝西里爾。我認爲這個問題一定不夠清楚，所以我編輯了更多細節。 – JasTonAChair

我想你把你想要的刻度值的屏幕截圖刻度值基本上是x軸和y軸上的值，但似乎你需要別的東西。 – Cyril

像這樣的東西應該工作。

axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      values: function(x) { return customTicks(x) }, 
      format: function(x) { return customFormat(x); }, 
     } 
    } 
}

customTicks()必須返回一個日期數組才能工作。

function customTicks(x) { 
    start = x[0]; 
    end = x[1]; 
    result = []; 
    for (var i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) { 
     result.push(new Date(i)); 
    } 
    return result; 
}

customFormat()取得日期並返回該日期的字符串。這使您可以靈活地根據需要自定義格式。

function customFormat(x) { 
}

它可能不是特別優雅，但是做的工作。這種方法的一個好處是，您可以在多個圖表上使用相同的功能，並且始終都會顯示相同的行爲。

問題＃1這種方法是，它似乎叫customTicks()對每一個數據點，就像它爲customFormat()。

問題＃2是，它產生大量的這些錯誤：

d3.v3.min。js：1 [違規]在滾動阻止的「touchstart」事件中添加了非被動事件偵聽器。考慮將事件處理程序標記爲「被動」，以使頁面更具響應性。見https://www.chromestatus.com/feature/5745543795965952

這已經被標記＃2在Added non-passive event listener to a scroll-blocking 'touchstart' event

來源

2017-09-27 15:22:34 Vishal

動態更改刻度值，c3js

回答

相關問題