更改C3.js图表​​上的工具提示格式

Question

我的页面上有这样的图表：

var chart = c3.generate({
data: {
    columns: [
        ['data1', 30000, 20000, 10000, 40000, 15000, 250000],
        ['data2', 100, 200, 100, 40, 150, 250]
    ],
    axes: {
        data2: 'y2'
    }
},
axis : {
    y : {
        tick: {
            format: d3.format("s")
        }
    },
    y2: {
        show: true,
        tick: {
            format: d3.format("$")
        }
    }
},
tooltip: {
    format: {
        title: function (d) { return 'Data ' + d; },
        value: function (value, ratio, id) {
            var format = id === 'data1' ? d3.format(',') : d3.format('$');
            return format(value);
        }
           //value: d3.format(',') // apply this format to both y and y2
    }
}
});

它工作正常，但我有一个更改数据的按钮：

$('#filter').on('click', function(event) {
    event.preventDefault();

    chart.load({
        unload: true,
        columns: [
            ['data1', 70, 100, 140, 80],
            ['data2', 30, 140, 40, 80]
        ]
    });
});

更改后我想更改工具提示格式但我找不到更改和更新它的方法。每次有人点击按钮时都可以不重新创建图表吗？

Answer 1

要记住的关键是标题，格式等是每次显示工具提示时运行的函数 - 所以所有人都需要做的是将逻辑引入那些允许一个切换所需格式的函数。

在您的情况下，您可以使用一个简单的变量将格式表示为数字。 e.g。

var format = 1;

然后在格式函数中设置条件......

tooltip: {
    format: {
        title: function (d) { 
            if(format === 1) return 'Data ' + d; 
            if(format === 2) return 'New Data ' + d; 
        },
        // etc ...
    }
}

最后在点击...

时设置所需的格式

$('#filter').on('click', function(event) {
    event.preventDefault();
    format = 2; // simple
    chart.load({
        unload: true,
        columns: [
            ['data1', 70, 100, 140, 80],
            ['data2', 30, 140, 40, 80]
        ]
    });
});

显然这是一个非常简单的例子，但是原理保持不变 - 在运行时函数中设置所需格式的逻辑用于显示工具提示 - 这样你就可以改变它们的显示方式而无需重新创建图表每一次。

根本没有理由不能在对象层次结构中采用功能方法级别或更高级别 - 例如在格式或工具提示级别。

每当某些东西需要一个对象或值时 - 只要它根据需要返回类型，你总是可以使用一个函数。例如

var formatx = { ... } 

tooltip: {
   format: function() {
      switch(format) {
         case 1: return { ... },
         case 2: return formatx,
         ...
      }
   }
}