Question

我有一个包含2个列系列和1个系列的Kendo图表。 click事件仅适用于行系列。如何为列系列启用它？请参阅下面的代码。

谢谢！

包含2列系列和1行系列的剑道图

<html>
<head id="Head1" runat="server">
    <title>Test</title>
</head>
<body>

<form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="rsm">
     <Scripts>
        <telerik:RadScriptReference Path="js/jquery.min.js" ScriptMode="Release" Combine="true" />
        <telerik:RadScriptReference Path="js/kendo.web.min.js" ScriptMode="Release" Combine="true" />
        <telerik:RadScriptReference Path="js/kendo.dataviz.min.js" ScriptMode="Release" Combine="true" />
        <telerik:RadScriptReference Path="js/kendo.grid.min.js" ScriptMode="Release" Combine="true" />
        <telerik:RadScriptReference Path="js/kendo.pager.min.js" ScriptMode="Release" Combine="true" />
     </Scripts>
    </telerik:RadScriptManager>


    <div class="k-chart-wrapper" id="DetailChart" style="height:410px"></div>

<script language="javascript" type="text/javascript">
    var chartData = [];
    chartData.push(
        { Date: 1, OverallProfit: 25, OverallCost :75, OverallRevenue : 100 },
        { Date: 2, OverallProfit: 27.5, OverallCost :82.5, OverallRevenue : 110 },
        { Date: 3, OverallProfit: 37.5, OverallCost :112.5, OverallRevenue : 150 },
        { Date: 4, OverallProfit: 42.5, OverallCost :127.5, OverallRevenue : 170 },
        { Date: 5, OverallProfit: 23, OverallCost :69, OverallRevenue : 92 },
        { Date: 6, OverallProfit: 26.5, OverallCost :79.5, OverallRevenue : 106 },
        { Date: 7, OverallProfit: 29, OverallCost :87, OverallRevenue : 116 },
        { Date: 8, OverallProfit: 30, OverallCost :90, OverallRevenue : 120 },
        { Date: 9, OverallProfit: 31.5, OverallCost :94.5, OverallRevenue : 126 },
        { Date: 10, OverallProfit: 19.5, OverallCost :58.5, OverallRevenue : 78 },
        { Date: 11, OverallProfit: 22, OverallCost :66, OverallRevenue : 88 },
        { Date: 12, OverallProfit: 24, OverallCost :72, OverallRevenue : 96 },
        { Date: 13, OverallProfit: 26, OverallCost :78, OverallRevenue : 104 },
        { Date: 14, OverallProfit: 35, OverallCost :105, OverallRevenue : 140 },
        { Date: 15, OverallProfit: 40, OverallCost :120, OverallRevenue : 160 },
        { Date: 16, OverallProfit: 33, OverallCost :99, OverallRevenue : 132 },
        { Date: 17, OverallProfit: 32.5, OverallCost :97.5, OverallRevenue : 130 },
        { Date: 18, OverallProfit: 30, OverallCost :90, OverallRevenue : 120 },
        { Date: 19, OverallProfit: 27.5, OverallCost :82.5, OverallRevenue : 110 },
        { Date: 20, OverallProfit: 25, OverallCost :75, OverallRevenue : 100 },
        { Date: 21, OverallProfit: 26.5, OverallCost :79.5, OverallRevenue : 106 },
        { Date: 22, OverallProfit: 29, OverallCost :87, OverallRevenue : 116 },
        { Date: 23, OverallProfit: 31.5, OverallCost :94.5, OverallRevenue : 126 },
        { Date: 24, OverallProfit: 32.5, OverallCost :97.5, OverallRevenue : 130 },
        { Date: 25, OverallProfit: 34, OverallCost :102, OverallRevenue : 136 },
        { Date: 26, OverallProfit: 34.5, OverallCost :103.5, OverallRevenue : 138 },
        { Date: 27, OverallProfit: 35, OverallCost :105, OverallRevenue : 140 },
        { Date: 28, OverallProfit: 37.5, OverallCost :112.5, OverallRevenue : 150 },
        { Date: 29, OverallProfit: 4, OverallCost :12, OverallRevenue : 16 },
        { Date: 30, OverallProfit: 42.5, OverallCost :127.5, OverallRevenue : 170 }
    );

    function createChart() {

        var categoryAxis = []; var valueAxis = [];
        var series = [];


        series.push({ field: "OverallRevenue", name: "Revenue", type: "line", width: 4, missingValues: "interpolate", markers: { visible: true }, stack: false, tooltip: { visible: true }, seriesClick: DetailChart_Click });
        series.push({ field: "OverallCost", name: "Cost", type: "column", markers: { visible: false }, spacing: 0, tooltip: { visible: true }, stack: true, seriesClick: DetailChart_Click });
        series.push({ field: "OverallProfit", name: "Profit", type: "column", markers: { visible: false }, spacing: 0, tooltip: { visible: true }, stack: true, seriesClick: DetailChart_Click });


        categoryAxis.push({
            field: "Date",
            labels: {
                template: "#= value #"
            },
            majorGridLines: {
                visible: false
            },
            minorGridLines: {
                visible: false
            }
        });


        valueAxis.push({
            labels: {
                template: "$#= value #"
            },
            majorGridLines: {
                visible: true
            },
            minorGridLines: {
                visible: false
            }
        });


        $("#DetailChart").kendoChart({
            dataSource: chartData,
            legend: {
                position: "bottom",
                visible: true
            },
            title: {
                text: "Test Chart"
            },
            transitions: true,
            series: series,
            categoryAxis: categoryAxis,
            tooltip: {
                visible: false
            },
            valueAxis: valueAxis,
            seriesClick: DetailChart_Click
        });
    }

    function DetailChart_Click(e) {
        alert("clicked");
    }

    createChart();
</script>

</form>
</body>
</html>

Answer 1

您使用的是哪个版本？它似乎与最新版本一起工作正常。 Here就是我尝试过的。

Click事件对Kendo图表中的列系列不起作用

1 个答案: