chart.js - 點擊圖表中的特定部分時鏈接到其他頁面

Question

所以我想單擊餅圖中的一個切片。切片應作爲我們系統中另一個頁面的正常鏈接。這是HTML和JS的。否則，我的圖表正常工作。

另外：我試過的解決方案，我在這裏找到，但沒有一個已經工作 - 例如onclick在選項部分與相應的功能（警報），但這並沒有工作和搞砸了其餘的頁。 很抱歉，如果這有點模糊，我對此很陌生。

<div class="row" id="chartrow"> 
 
    <div class="col-6" > 
 
     <div class="card container-fixed" > 
 
      <div class="row" > 
 
       <div class="col-6"> 
 
        <table class="table table-striped table-sm table-hover"> 
 
      <tbody> 
 
       <tr> 
 
        <th>Answer option </th> 
 
        <th>Answer </th> 
 
        <th>Percent </th> 
 

 
       </tr> 
 
       <tr> 
 

 
        <td>1</td> 
 
        <td>2</td> 
 
        <td>12</td> 
 

 
       </tr> 
 
       <tr> 
 

 
        <td>2</td> 
 
        <td>1</td> 
 
        <td>23</td> 
 
       </tr> 
 
       <tr> 
 

 
        <td>3</td> 
 
        <td>5</td> 
 
        <td>56</td> 
 
       </tr> 
 
       <tr> 
 

 
        <td>4</td> 
 
        <td>3</td> 
 
        <td>14</td> 
 
        <tr> 
 

 
         <td>5</td> 
 
         <td>6</td> 
 
         <td>89</td> 
 
        </tr> 
 
       <tr> 
 

 
        <td>6</td> 
 
        <td>8</td> 
 
        <td>56</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
       </div> 
 
      <div class="col-6 container-fixed"> 
 
      <canvas id="pieChart" height="200" data-toggle="tooltip" data-placement="top"></canvas> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

var ctxP = document.getElementById("pieChart").getContext('2d'); 
 
var myPieChart = new Chart(ctxP, { 
 
    showTooltips:true, 
 
    type: 'pie', 
 
    data: { 
 
    labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"], 
 
    datasets: [{ 
 
     data: [ 1, 5,10, 20,50,70,50], 
 
     backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"], 
 
     hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"] 
 
    }] 
 
    }, 
 
    options:{ 
 
    
 
     legend:{ 
 
      display:true, 
 
      position:"right" 
 
       } 
 
      } 
 
});

Answer 1

您可以使用getElementAtEvent()方法來檢測對哪一段/下用戶點擊您的餅圖的切片，並根據打開鏈接/頁因此。

下面是一個簡單的例子：

var canvasP = document.getElementById("pieChart"); 
 
var ctxP = canvasP.getContext('2d'); 
 
var myPieChart = new Chart(ctxP, { 
 
    type: 'pie', 
 
    data: { 
 
     labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"], 
 
     datasets: [{ 
 
     data: [1, 5, 10, 20, 50, 70, 50], 
 
     backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"], 
 
     hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"] 
 
     }] 
 
    }, 
 
    options: { 
 
     legend: { 
 
     display: true, 
 
     position: "right" 
 
     } 
 
    } 
 
}); 
 

 
canvasP.onclick = function(e) { 
 
    var slice = myPieChart.getElementAtEvent(e); 
 
    if (!slice.length) return; // return if not clicked on slice 
 
    var label = slice[0]._model.label; 
 
    switch (label) { 
 
     // add case for each label/slice 
 
     case 'Värde 5': 
 
     alert('clicked on slice 5'); 
 
     window.open('www.example.com/foo'); 
 
     break; 
 
     case 'Värde 6': 
 
     alert('clicked on slice 6'); 
 
     window.open('www.example.com/bar'); 
 
     break; 
 
     // add rests ... 
 
    } 
 
}

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