Question

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

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 code：

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

提前致谢。

Answer 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版剑道似乎从模板中删除了链接。我在2014.2.716尝试了它，似乎有效。

Answer 2

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

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

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

这可能有效

kendo图表标签 - 可点击？

2 个答案: