Question

我有一个水平条形图，显示“具有登录计数的用户”。当按下用户名时，我需要转到该用户的个人资料页面。但是，当我放置标签时，如何在y轴标签中放置链接。它似乎不是HTML格式。是否可以在y轴标签中插入链接？如何绑定点击y轴标签？我正在使用图表js 2.7.1。我当前的代码和尝试过的代码如下。

<canvas id="chartBar1"></canvas>

<script type="text/javascript">
var ctx = document.getElementById('chartBar1').getContext('2d');
new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["Gonzelo", "Vikram", "Rahaab", "philip", "mark", "juda"],
    datasets: [{
      label: '# of breaches',
      data: [7,2.3,25,28,35],
      backgroundColor: '#27AAC8'
    }]
  },
  options: {
   title:{
    display: true,
    text: 'Count for Today'
  },
  legend: {
    display: false,
    labels: {
      display: false
    }
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero:true,
        fontSize: 10,
        max: 80
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero:true,
        fontSize: 11
      }
    }]
  }
  }
 });
</script>

我尝试过的代码通过添加onclick选项在X轴上起作用，但是我需要使其在y轴标签上起作用。

    onClick: function(e, data) {
    var ctx = $("#chartBar1")[0].getContext("2d");
    var base = that.chart.chartArea.bottom;
    var height = that.chart.chart.height;
    var width = that.chart.chart.scales['x-axis-0'].width;
    var offset = $('#chartBar1').offset().top - $(window).scrollTop();
    if(e.pageY > base + offset){
      var count = that.chart.scales['x-axis-0'].ticks.length;
      var padding_left = that.chart.scales['x-axis-0'].paddingLeft;
      var padding_right = that.chart.scales['x-axis-0'].paddingRight;
      var xwidth = (width-padding_left-padding_right)/count;
            // don't call for padding areas
            var bar_index = (e.offsetX - padding_left - that.chart.scales['y-axis-0'].width) / xwidth;
            if(bar_index > 0 & bar_index < count){
              bar_index = Math.floor(bar_index);
              console.log(label_id_array[bar_index]);
              var link = '<%= admin_path %>/'+label_id_array[bar_index];
              window.open(
                link);
            }
          }
        }

这里label_id_array是用户ID的数组。

将点击事件添加到图表JS中水平条形图的Y轴标签上

0 个答案: