chart.js - 单击图表中的特定部分时链接到其他页面 [英] chart.js - link to other page when click on specific section in chart

问题描述

所以我想点击饼图中的一个切片.该切片应作为到我们系统中另一个页面的正常链接.这是用于此的 HTML 和 JS.否则我的图表工作正常.

另外:我尝试过在这里找到的解决方案，但没有一个奏效-例如，选项部分中的 onclick 具有相应的功能(警报)，但这不起作用并弄乱了页面的其余部分.对不起，如果这有点模糊，我对此有点陌生.

<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"><tr><th>回答选项</th><th>回答</th><th>百分比 </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>
<div class="col-6 container-fixed"><canvas id="pieChart" height="200" data-toggle="tooltip" data-placement="top"></canvas>

var ctxP = document.getElementById("pieChart").getContext('2d');var myPieChart = 新图表(ctxP，{显示工具提示:真，类型:'馅饼'，数据: {标签:[Värde 1"、Värde 2"、Värde 3"、Värde 4"、Värde 5"、Värde 6"、Värde 7"]、数据集:[{数据:[ 1, 5,10, 20,50,70,50],背景颜色:[#64B5F6"、#FFD54F"、#2196F3"、#FFC107"、#1976D2"、#FFA000"、#0D47A1"]、悬停背景颜色:[#B2EBF2"、#FFCCBC"、#4DD0E1"、#FF8A65"、#00BCD4"、#FF5722"、#0097A7"]}]},选项:{传奇:{显示:真，位置:右"}}});

解决方案

您可以使用 getElementAtEvent() 方法来检测饼图的哪个部分/切片被点击，并基于此打开相应的链接/页面.

这是一个简单的例子:

var canvasP = document.getElementById("pieChart");var ctxP = canvasP.getContext('2d');var myPieChart = 新图表(ctxP，{类型:'馅饼'，数据: {标签:[Värde 1"、Värde 2"、Värde 3"、Värde 4"、Värde 5"、Värde 6"、Värde 7"]、数据集:[{数据:[1, 5, 10, 20, 50, 70, 50],背景颜色:[#64B5F6"、#FFD54F"、#2196F3"、#FFC107"、#1976D2"、#FFA000"、#0D47A1"]、悬停背景颜色:[#B2EBF2"、#FFCCBC"、#4DD0E1"、#FF8A65"、#00BCD4"、#FF5722"、#0097A7"]}]},选项: {传奇: {显示:真实，位置:正确"}}});canvasP.onclick = 函数(e){var slice = myPieChart.getElementAtEvent(e);if (!slice.length) 返回；//如果没有点击切片则返回var label = slice[0]._model.label;开关(标签){//为每个标签/切片添加大小写案例Värde 5":alert('点击切片 5');window.open('www.example.com/foo');休息;案例Värde 6":alert('点击切片 6');window.open('www.example.com/bar');休息;//添加休息...}}

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

So I want to click on a slice in the pie chart. The slice should act as a normal link to another page in our system. Here is the HTML and JS for this. My chart works fine otherwise.

Also: I've tried solutions that i've found here but none of them has worked- For example onclick in options section with a corresponding function(alert) but this did not work and messed up the rest of the page. Sorry if this is a bit fuzzy, i'm kind of new to this.

<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"
               }
          }
});

解决方案

You can use getElementAtEvent() method to detect which section/slice of your pie chart was clicked on, and based on that open a link/page accordingly.

Here is a quick example :

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 - 单击图表中的特定部分时链接到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！