logo标签列表

Chart.js 将标签转换为链接

javascriptchart.js
9

我不确定在不进行类似以下操作的情况下是否可能实现： 在HTML画布中创建链接 但我们需要确认一下。

是否有一种（相对）简单的方法将Chart.js标签转换为链接？所涉及的图表是雷达图表：http://www.chartjs.org/docs/#radar-chart （到目前为止，我一直在使用图例进行操作，通过对库进行少量修改可以正常工作，但现在我应该使用标签本身。）

我相信你必须按照你提供的链接中的方式进行操作。这是因为Chart.js使用画布元素来绘制所有内容，包括其标签。 - chRyNaN
即使使用那种解决方案对我来说也不好，因为如果我理解正确的话，我只能拥有看起来像链接的链接——完整的URL，而不是对于普通用户不可见的用户友好标签。 - dnmh
1
稍作修改即可解决。您可以显示一个文本，但存储与该文本对应的链接，当单击该项时，转到相应的链接位置。 - chRyNaN
2个回答
1
你可以监听点击事件，然后遍历所有的点标签，检查点击是否在该框内。如果是这种情况，则从包含所有标签的数组中获取相应的标签。
然后，您可以使用 window.location = link 或 window.open(link) 打开链接。
例如，单击时搜索颜色在 Google 上： 

const options = {
  type: 'radar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'pink'
      }
    ]
  },
  options: {
    onClick: (evt, activeEls, chart) => {
      const {
        x,
        y
      } = evt;
      let index = -1;

      for (let i = 0; i < chart.scales.r._pointLabelItems.length; i++) {
        const {
          bottom,
          top,
          left,
          right
        } = chart.scales.r._pointLabelItems[i];

        if (x >= left && x <= right && y >= top && y <= bottom) {
          index = i;
          break;
        }
      }

      if (index === -1) {
        return;
      }

      const clickedLabel = chart.scales.r._pointLabels[index];

      window.open(`https://www.google.com/search?q=color%20${clickedLabel}`); // Blocked in stack snipet. See fiddle
      console.log(clickedLabel)
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

代码演示: https://jsfiddle.net/Leelenaleee/fnqr4c7j/22/

0

现在已经很晚了，但是bencekd的答案和提供的代码对于如何"将链接添加到X-Label Chart.js"非常相似的问题对我很有帮助。

注意：我被迫使用旧版Chart.js v1，并且它是用于条形图而不是雷达图。您需要根据当前版本的Chart.js进行相应的修改。我也不明白为什么它不能通过一些重构来适用于雷达图。

代码（我进行了一些小的更改，"/*"注释表示我的行）：

    $("#canvas").click( 
       function(evt){
            var ctx = document.getElementById("canvas").getContext("2d");
            // from the endPoint we get the end of the bars area
            var base = myBar.scale.endPoint;
            var height = myBar.chart.height;
            var width = myBar.chart.width;
            // only call if event is under the xAxis
            if(evt.pageY > base){
                // how many xLabels we have
                var count = myBar.scale.valuesCount;
                var padding_left = myBar.scale.xScalePaddingLeft;
                var padding_right = myBar.scale.xScalePaddingRight;
                // calculate width for each label
                var xwidth = (width-padding_left-padding_right)/count;
                // determine what label were clicked on AND PUT IT INTO bar_index 
                var bar_index = (evt.offsetX - padding_left) / xwidth;
                // don't call for padding areas
                if(bar_index > 0 & bar_index < count){
                    bar_index = parseInt(bar_index);
                    // either get label from barChartData
                    //console.log("barChartData:" + barChartData.labels[bar_index]);
                    // or from current data
                    /* barChartData didn't work for me, so disabled above */
                    var ret = [];
                    for (var i = 0; i < myBar.datasets[0].bars.length; i++) {
                        ret.push(myBar.datasets[0].bars[i].label)
                    };
                    console.log("current data:" + ret[bar_index]);
                    // based on the label you can call any function
                    /* I made to go where I wanted here with a window.location.href
                    and taking the label (ret[bar_index]) as an argument */
                }
            }
       }
);

还有他们提供的Fiddle。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接