更改提示格式

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, 
     ... 
     } 
    } 
}