Kendo UI 条形图类别在 seriesClick 事件中未定义

Question

我无法在 Kendo 条形图 (seriesClick) 上单击事件。我没有定义。以前，我喜欢 e.category 及其作品，因为 categoryAxis: not in array。但是现在我的代码 categoryAxis:is 在数组中以避免标签与条形图重叠。实际上我该如何调用数组中的 categoryAxis。下面是我的脚本：

var series = [{
        "name": "Total",
        "colorField": "valueColor",
        "gap": 0.5,
        "data": [{value: aa, valueColor: "#ff0000"},{value: bb, valueColor: "#9966ff"},{value: cc, valueColor: "#66ff66"},{value: dd, valueColor: "#ffff00"},
                 {value: ee, valueColor: "#ff8080"},{value: ff, valueColor: "#ff9933"},{value: gg, valueColor: "#ccccb3"},{value: hh, valueColor: "#4dffff"}]
    }];

$("#chart_div2").kendoChart({
    title: {
        text: "Emotion Result"
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "bar",
        height: 150
    },
    series: series,
    valueAxis: {

        line: {
            visible: false
        },
        minorGridLines: {
            visible: true
        },
        axisCrossingValue: [0, -Infinity]
    },
    categoryAxis: [{
        labels:{
          visible:false
        }
    },{
        categories: ["Anger", "Calm(+) / Agitated(-)", "Fear", "Happy(+) / Sad(-)", "Like(+) / Dislike(-)", "Shame", "Sure(+) / Unsure(-)", "Surprise"],
        majorGridLines: {
            visible: false
        }
    }],
    tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
    },
    seriesClick: function(e){

        var emo=e.category;
        alert("You Click : "+emo)

        clickBar(emo);
    }
});

感谢您的帮助

Answer 1

您向 categoryAxis 传递了错误的数组配置。参见 Kendo UI Sample EXAMPLE - CONFIGURE THE CATEGORY AXIS

演示示例JSFiddle

Javascript:

function onSeriesClick(e) {
 alert(e.category);
 alert(kendo.format("Series click :: {0} ({1}): {2}",
  e.series.name, e.category, e.value));
}

var series = [{
 "name": "Total",
 "colorField": "valueColor",
 "gap": 0.5,
 "data": [{
  value: 10,
  valueColor: "#ff0000"
 }, {
  value: 20,
  valueColor: "#9966ff"
 }, {
  value: 30,
  valueColor: "#66ff66"
 }, {
  value: 40,
  valueColor: "#ffff00"
 }, {
  value: 50,
  valueColor: "#ff8080"
 }, {
  value: 60,
  valueColor: "#ff9933"
 }, {
  value: 70,
  valueColor: "#ccccb3"
 }, {
  value: 80,
  valueColor: "#4dffff"
 }]
}];

function createChart() {
 $("#chart").kendoChart({
  title: {
   text: "Emotion Result"
  },
  legend: {
   visible: false
  },
  seriesDefaults: {
   type: "bar",
   height: 150
  },
  series: series,
  valueAxis: {
   line: {
    visible: false
   },
   minorGridLines: {
    visible: true
   },
   axisCrossingValue: [0, -Infinity]
  },
  categoryAxis: [{
   categories: ["Anger", "Calm(+) / Agitated(-)", "Fear", "Happy(+) / Sad(-)", "Like(+) / Dislike(-)", "Shame", "Sure(+) / Unsure(-)", "Surprise"]
  }],

  tooltip: {
   visible: true,
   template: "#= series.name #: #= value #"
  },

  seriesClick: onSeriesClick
 });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

Answer 2

另一个例子：JSFiddle。可能这会解决您的问题。在此示例中，需要进行一些与数据源相关的更改。

$(function () {
    creatCharts();
});

function onSeriesClick(e) {

    alert(e.category);
    alert(kendo.format("Series click :: {0} ({1}): {2}", e.series.name, e.category, e.value));
}

function creatCharts() {
    $("#barchart").kendoChart({
        dataSource: {
            data: [
                { field: "Anger", value: -10, valueColor: "#ff0000" },
                { field: "Calm(+) / Agitated(-)", value: 20, valueColor: "#9966ff" },
                { field: "Fear", value: 30, valueColor: "#66ff66" },
                { field: "Happy(+) / Sad(-)", value: 30, valueColor: "#ffff00" },
                { field: "Like(+) / Dislike(-)", value: 40, valueColor: "#ff8080" },
                { field: "Shame", value: 50, valueColor: "#ff9933" },
                { field: "Sure(+) / Unsure(-)", value: 60, valueColor: "#ff9933" },
                { field: "Surprise", value: 70, valueColor: "#4dffff" },
            ]
        },
        title: {
            text: "Emotion Result"
        },
        legend: {
            visible: true,
            position: "left"
        },
        seriesDefaults: {
            type: "bar",
            stack: true
        },
        series: [{
            field: "value",
            colorField: "valueColor",
            gap: 0.5,
        }],
        categoryAxis: {
            field: "field",
            labels: {
                template: function (e) {
                    if (e.dataItem.value * 1 < 0) {
                        return "<tspan style='position: absolute' dx='20'>" + e.value + "</tspan>"
                    }
                    else {
                        return "<tspan style='position: absolute' dx='-109'>" + e.value + "</tspan>"
                    }
                }
            },
            majorGridLines: {
                visible: false
            },
        },
        valueAxis: {
            numeric: true,
            line: {
                visible: false
            },
            minorGridLines: {
                visible: true
            }
        },
        seriesClick: onSeriesClick
    });
}

<div id="barchart"></div>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

Answer 3

我认为这会满足您的要求：

      $("#chart_div2").kendoChart({
          theme: "bootstrap",
          title: {
              text: "Emotion Result"
          },
          dataSource: {
              data: [
                  { value: -10, valueColor: "#ff0000", emotion: "Anger",  },
                  { value: 20,  valueColor: "#9966ff", emotion: "Calm(+) / Agitated(-)",  },
                  { value: 30,  valueColor: "#66ff66", emotion: "Fear",   },
                  { value: 30,  valueColor: "#ffff00", emotion: "Happy(+) / Sad(-)",  },
                  { value: 40,  valueColor: "#ff8080", emotion: "Like(+) / Dislike(-)",  },
                  { value: -50, valueColor: "#ff9933", emotion: "Shame",  },
                  { value: 60,  valueColor: "#ccccb3", emotion: "Sure(+) / Unsure(-)", },
                  { value: 70,  valueColor: "#4dffff", emotion: "Surprise",  },
              ]
          },
          legend: {
              visible: false
          },
          seriesDefaults: {
              type: "bar",
              height: 150
          },
          series: [{
            name: "Total",
            field: "value",
            categoryField: "emotion",
            colorField: "valueColor",
            gap: 0.5,
          }],
          valueAxis: {
              line: {
                  visible: false
              },
              minorGridLines: {
                  visible: true
              },
              axisCrossingValue: [0, -Infinity]
          },
          categoryAxis: [{
              labels:{
                visible:false
              }
          },{
            line: { visible: false},
            field: "emotion",
              majorGridLines: {
                  visible: false
              }
          }],
          tooltip: {
              visible: true,
              template: "#= series.name #: #= value #"
          },
          seriesClick: function(e){
              var emo=e.category;
              alert("You Click : "+emo)
              //clickBar(emo);
          }
      });

通过这种方式，情感在两个类别轴上都可用，因此当您单击时 e.category 已设置。在系列上设置 categoryField: "emotion"，使其在点击事件中可用。

DEMO

Kendo UI 条形图类别在 seriesClick 事件中未定义

Kendo UI Bar Chart category is undefined in seriesClick event

jquery

kendo-ui

kendo-chart