更改 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

要记住的关键是，标题、格式等是每次显示工具提示时运行的函数 - 因此需要做的就是将逻辑引入这些函数中，以便进行切换所需的格式。

在您的情况下，也许您可以只使用一个简单的变量将格式表示为数字。例如

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]
        ]
    });
});

显然这是一个非常简单的示例，但原理保持不变 - 将用于设置所需格式的逻辑放入 run-time 函数中以显示工具提示 - 这样您就可以更改它们的显示方式无需每次都重新创建图表。

完全没有理由不能在 object 层次结构中采用函数方法级别或更高级别 - 例如在格式或工具提示级别。

每当需要 object 或值时 - 只要 returns 类型符合要求，您始终可以使用函数。例如

var formatx = { ... } 

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

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

Change tooltip format on C3.js Chart

jquery

c3.js