javascript - 动态更改刻度值，c3js

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

这样的事情应该可行。

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 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

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