javascript - Kendo UI Chart - Click Events - Stack Overflow

admin管理员组

文章数量:1293645

Does anyone know how to create an on-click event for the Kendo-UI data viz bar graphs?

I have this graph inside a kendo window, and when you click on one of the bars, I need to swap out the content of the window.

I can't seem to find the right element to attach the click to.....

The kendo code......

 <script> // Kendo Chart
            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Memberships by dddd- dddd"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "dddd",
                        data: [123, 42, 76, 344],
                        color: '#0A9ECC'
                    }, {
                        name: "dddd",
                        data: [76, 970, 23, 14],
                        color: '#CE1D1D'
                    },
                    {
                        name: "ddddd",
                        data: [144, 44, 264, 647],
                        color: '#d2b723'
                    }],
                    valueAxis: {
                        max: 1000,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    categoryAxis: {
                        categories: ["Membership 1", "Membership 2", "Membership 3", "Membership 4"],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
            }
            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>

Does anyone know how to create an on-click event for the Kendo-UI data viz bar graphs?

I have this graph inside a kendo window, and when you click on one of the bars, I need to swap out the content of the window.

I can't seem to find the right element to attach the click to.....

The kendo code......

 <script> // Kendo Chart
            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Memberships by dddd- dddd"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "dddd",
                        data: [123, 42, 76, 344],
                        color: '#0A9ECC'
                    }, {
                        name: "dddd",
                        data: [76, 970, 23, 14],
                        color: '#CE1D1D'
                    },
                    {
                        name: "ddddd",
                        data: [144, 44, 264, 647],
                        color: '#d2b723'
                    }],
                    valueAxis: {
                        max: 1000,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    categoryAxis: {
                        categories: ["Membership 1", "Membership 2", "Membership 3", "Membership 4"],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
            }
            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>

• javascript
• jquery
• asp
• html
• kendo-ui

Share Improve this question Follow asked Feb 9, 2014 at 15:25 MarkMark 4,88388 gold badges5656 silver badges9393 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

I think you are looking for the seriesClick event.

$(".k-chart")
  .data("kendoChart")
  .bind("seriesClick", function (e) { console.log(e); })

本文标签： javascriptKendo UI ChartClick EventsStack Overflow