多系列xy的自定義工具提示

我使用此代碼自定義多線xy散點圖上的工具提示。我將如何修改工具提示，以便每個系列都有自己的唯一標籤nameArr，nameArr1，nameArr2 ...？ JSFiddle 多系列xy的自定義工具提示

tooltip: { 
    format: { 
     title: function(x) { 
      var indOfVal = engagmentArr.indexOf(x); 
      return nameArr[indOfVal - 1] 
     }, 
     name:function(){ 
     return engagmentArr[0]; 
     } 
    }, 
},

來源

2017-06-07 user8038235

請你設置的jsfiddle或codepen？ –

這裏是jsfiddle網址[jsfiddle]（https://jsfiddle.net/laguna92651/t1aLbc0d/） – user8038235

一般的解決方案是存儲與點圖本身分開的工具提示。通過組ID和數據索引

和訪問他們：

var tooltips = { 
    mention1: ['ROA=5.1%','ROA=8.1%','ROA=4.1%','ROA=10.1%'], 
    mention2: ['ROA=5.1%','ROA=8.1%','ROA=4.1%','ROA=10.1%'], 
    mention3: ['2000 ROA=2.2%','2001 ROA=8.2%','2002 ROA=5.2%','2005 ROA=12.2%'], 
    mention4: ['2000 ROA=2.2%','2001 ROA=8.2%','2002 ROA=5.2%','2005 ROA=12.2%'] 
} 

var chart = c3.generate({ 
    data: { 
     xs: { 
      mention1: 'engagement1', 
      mention2: 'engagement2', 
      mention3: 'engagement3', 
      mention4: 'engagement4' 
     }, 

     columns: [ 
      ['engagement1', 140, 150, 157, 220], 
      ['mention1', 2237, 4456, 3300, 1453], 
      ['engagement2', 40, 50, 57, 120], 
      ['mention2', 2237, 4456, 3300, 1453], 
      ['engagement3', 150, 155, 165, 230], 
      ['mention3', 2037, 4756, 3100, 1053], 
      ['engagement4', 50, 55, 65, 130], 
      ['mention4', 2037, 4756, 3100, 1053] 
     ], 
     type: 'scatter' 
    }, 
    point: { 
     r: function(d) { 
      return d.value * 0.005; 
     }, 
    }, 
    tooltip: { 
     contents: function (d) { 
      var id = d[0].id;     // 'mention1', 'mention2' ... 
      var index = d[0].index;    // 1,2,3,4 ... 

      // replace plain data with custom markup or copy c3's default 
      return tooltips[id][index];   // 'ROA=...' 
     } 
    } 
});

見fiddle

來源

2017-06-13 10:12:19

工作很好，謝謝。當我替換提到時，第一組數據正常工作：硬編碼的數據包含變量** Data1 **，** Data2 **和** Data3 **，但是當我用** Data4替換提及的2：硬編碼數據時**，** Data5 **和** Data6 **，代碼中斷，有什麼想法？ ** Data1 **變量在Filemaker數據庫中生成。我更新了我的jsfiddle以顯示** Datan **放置。如果我只替換提及2並留下提及的硬編碼，它仍然會中斷。 – user8038235

你可以給更新的小提琴的鏈接？上一個鏈接似乎包含舊代碼。 –

[JSFiddle]（https://jsfiddle.net/laguna92651/t1aLbc0d/）無效的外部數據源已被註釋掉，謝謝。 @Dmitry – user8038235

多系列xy的自定義工具提示

回答

相關問題