剑道图表标签 - 可点击？答案

【问题标题】：kendo Chart labels- clickable?剑道图表标签 - 可点击？
【发布时间】：2014-08-15 11:13:30
【问题描述】：

在示例中：http://jsbin.com/AreqameT/1/edit 条形图下方的标签可以在剑道图表中点击吗？文本“销售和合同”和其他标签应该可以点击。这个可以吗？

JS代码：

$("#chart").kendoChart({
  legend: {
    position: "bottom"
  },
  seriesDefaults: {

        labels:{
            visible:true,
            template: '#=kendo.format("{0:0}", value)#'
        }

  },
  series: [
    {   
      type: "verticalBullet",
      currentField: "score",
      targetField: "average",
      labels: {
        visible: true,
        template: '#alert(1)#"'
      },
      target: {
        color: "transparent",
        border: {
          width: 2,
          dashType: "dot",
          color: "#444"
        },
        line: {
          width: 0
        }
      },
      data: [
        {
          score: 93.7,
          average: 65.2                              
        }, {
          score: 80.2,
          average: 22.2
        }, {
          score: 60.8,
          average: 35.2
        }, {

          score: 82.1,
          average: 45.2                                
        }, {
          score: 74.2,
          average: 55.2
        }
      ]
    }
  ],
  categoryAxis: {
    labels: { rotation: -45 },
    categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
    line: {
      visible: false
    },
    color: "#444", 
    axisCrossingValue: [0, 0, 100, 100]
  },
  tooltip: {
    visible: false
  }
}).data("kendoChart");

HTML 代码：

<body>
  <div id="chart"></div>
</body>

提前致谢。

【问题讨论】：

标签： kendo-ui kendo-dataviz

【解决方案1】：

使用较新版本的 Kendo（您的 jsBin 使用 2013 版本...更新到 2014.2），您可以使用 categoryAxis.labels.template 添加标签链接。

  categoryAxis: {
    labels: {
      rotation: -45,
      template: '<a xlink:href="http://www.google.com">#: value #</a>'
    },

（注意在标签中添加xlink:）

为了更好地解释，标签实际上是 SVG 图像的一部分，而不是纯 HTML。但是，SVG 支持链接：http://www.w3.org/TR/SVG/linking.html#Links

由于某种原因，2013 年的旧版 Kendo 似乎从模板中删除了链接。我用 2014.2.716 尝试过，它似乎可以工作。

【讨论】：

【解决方案2】：

您的 Jsbin 例如不工作。附加事件axisLabelClick或legendItemClick

axisLabelClick: function(e) {
    console.log(e.axis.type, e.value);
  }

legendItemClick: function(e) {
    console.log(e.axis.type, e.value);
  }

这可能有效

【讨论】：