chart.js散點圖 - 在工具提示中顯示特定於點的標籤

我在嘗試構建chart.js散點圖，當用戶將鼠標懸停在散點上時，工具提示顯示標籤爲，具體爲至那一點。chart.js散點圖 - 在工具提示中顯示特定於點的標籤

所以每個數據點都有它的x和y值，也是標籤。

到目前爲止，我已經得到了

var ctx = document.getElementById('myChart').getContext('2d'); 
 
var scatterChart = new Chart(ctx, { 
 
    type: 'scatter', 
 
    data: { 
 
     datasets: [{ 
 
      labels: ["Label 1","Label 2","Label 3"], 
 
      data: [{ 
 
       x: -10, 
 
       y: 0, 
 
      }, { 
 
       x: 0, 
 
       y: 10 
 
      }, { 
 
       x: 10, 
 
       y: 5 
 
      }] 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
      callbacks: { 
 
       label: function(tooltipItem, data) { 
 
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other'; 
 
        var label = data.labels[tooltipItem.index]; 
 
        return datasetLabel + ': ' + label; 
 
       } 
 
      } 
 
     } 
 
    } 
 
});

<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 

 
</head> 
 
<canvas id="myChart" style = "height:1000px"></canvas>

當我將鼠標懸停在每一個點，我想看到的是 '標籤1'， '標籤2' 或「3標籤'出現。

非常感謝

來源

2017-06-20 Ben Mayo

你可以做一個工作plunkr –

您可以使用以下工具提示標籤的回調函數實現這個...

tooltips: { 
    callbacks: { 
     label: function(tooltipItem, data) { 
     var label = data.labels[tooltipItem.index]; 
     return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')'; 
     } 
    } 
}

ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ

var ctx = document.getElementById('myChart').getContext('2d'); 
 
var scatterChart = new Chart(ctx, { 
 
    type: 'scatter', 
 
    data: { 
 
     labels: ["Label 1", "Label 2", "Label 3"], 
 
     datasets: [{ 
 
     label: 'Legend', 
 
     data: [{ 
 
      x: -10, 
 
      y: 0, 
 
     }, { 
 
      x: 0, 
 
      y: 10 
 
     }, { 
 
      x: 10, 
 
      y: 5 
 
     }] 
 
     }] 
 
    }, 
 
    options: { 
 
     tooltips: { 
 
     callbacks: { 
 
      label: function(tooltipItem, data) { 
 
       var label = data.labels[tooltipItem.index]; 
 
       return label + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')'; 
 
      } 
 
     } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="myChart" style="height:1000px"></canvas>

來源

2017-06-20 19:58:22

真棒 - 偉大的作品 –

chart.js散點圖 - 在工具提示中顯示特定於點的標籤

回答

相關問題