Ярлыки кендо Chart кликабельны?

В примере: 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
person user2439903    schedule 15.08.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Используя более новую версию 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

По какой-то причине более старая версия Kendo 2013 года, похоже, удалила ссылку из шаблона. Я попробовал это с 2014.2.716, и, похоже, это сработало.

person CodingWithSpike    schedule 15.08.2014

arrow_upward
1
arrow_downward

Например, ваш Jsbin не работает. Прикрепите ось событийLabelClick или legendItemClick

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

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

это может сработать

person cwishva    schedule 15.08.2014