动态更改刻度值，c3js

Dynamically change tick values, c3js

本文关键字：c3js 动态      更新时间：2023-09-26

我在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轴的值。我只想更改显示的记号。

这样的东西应该可以工作。

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

这已经在的Stackoverflow上标记了。将非被动事件侦听器添加到滚动阻止'；触摸启动'；事件

我在动态更新Y轴刻度值时遇到了同样的困难。我搜索了c3.js文档，期望得到类似于chart.axis.range或chart.axis.max/chart.axis.min的chart.axis.values。

在控制台上挖掘Chart对象之后。我设法解决了我的问题，但方法有点古怪。

请检查小提琴，我玩过chart.internal，它包含绘制图表的图表值。我更改了这些值，并使用chart.flush()方法重新绘制图表。

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

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

这对我有用。

相关文章：