更改提示格式

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

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

在对象层次结构中没有理由无法采用函数方法级别或更高级别 - 例如格式或工具提示级别。

无论何时需要某个对象或值 - 只要它根据需要返回该类型，就可以始终使用该函数。例如

var formatx = { ... } 

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