chart.js - 点击图表中的特定部分时链接到其他页面

问题描述：

所以我想单击饼图中的一个切片。切片应作为我们系统中另一个页面的正常链接。这是HTML和JS的。否则，我的图表正常工作。chart.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" 
 
       } 
 
      } 
 
});

答

您可以使用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>

chart.js - 点击图表中的特定部分时链接到其他页面

相关推荐