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

b1uwtaje  于 2022-11-23  发布在  Chart.js
关注(0)|答案(2)|浏览(152)

所以我想点击饼图中的一个切片。这个切片应该作为一个普通的链接到我们系统中的另一个页面。这里是这个切片的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"
               }
          }
});
p1iqtdky

p1iqtdky1#

accepted answer适用于版本2。
从第3版开始,getElementAtEvent(e)已被getElementsAtEventForMode(e, mode, options, useFinalPosition)(docs)取代。适用于第3版的可接受答案如下所示:
第一个

az31mfrm

az31mfrm2#

您可以使用**getElementAtEvent()**方法来检测您的饼图的哪个部分/切片被单击,并基于此打开相应的链接/页面。
下面是一个快速示例:
第一个

相关问题