Question

我在c3js中有一个条形图，它使用x轴上的类别标记。我想要显示的刻度值是在加载图表时设置的：

    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轴值。我只想改变显示的刻度。

Answer 1

我在动态更新Y轴刻度值时遇到同样的困难。我搜索了c3.js文档，期望获得类似于1. morning 2. day 3. night或chart.axis.values / chart.axis.range的{{1}}。

在挖掘控制台上的Chart对象之后。我以某种方式设法解决了我的问题，但有一点hacky方式。

请查看fiddle，我使用chart.axis.max进行了播放，其中包含绘制图表的图表值。我更改了这些值，并使用chart.axis.min方法重绘图表。

Answer 2

我像这样更改了x轴上的刻度值

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

工作示例here

修改

可以像这样更新值：

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

工作示例here

希望这有帮助！

Answer 3

这样的事情应该有效。

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

customTicks()必须返回一个Dates数组才能生效。

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 [违规]为滚动阻止＆＃39; touchstart＆＃39;添加了非被动事件监听器。事件。考虑将事件处理程序标记为“被动＆＃39;使页面更具响应性。见https://www.chromestatus.com/feature/5745543795965952

这已在Stackoverflow上标记为 Added non-passive event listener to a scroll-blocking 'touchstart' event

Answer 4

根据https://github.com/c3js/c3/issues/827：

chart.internal.config.axis_x_tick_values = getTicks(displayData);

这对我有用。

动态更改刻度值c3js

4 个答案: