动态更改刻度值，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

回答

相关问题