Kendo ui 单击事件对剑道图中的列系列不起作用_Kendo Ui

Kendo ui 单击事件对剑道图中的列系列不起作用

kendo-ui

Kendo ui 单击事件对剑道图中的列系列不起作用,kendo-ui,Kendo Ui,我有一张剑道图，有2列系列和1行系列。单击事件仅适用于线系列。如何为列系列启用它？请参阅下面的代码谢谢剑道图，2列系列和1行系列试验 var chartData=[]； chartData.push( {日期：1，总利润：25，总成本：75，总收入：100}， {日期：2，总利润：27.5，总成本：82.5，总收入：110}， {日期：3，总利润：37.5，总成本：112.5，总收入：150}， {日期：4，总利润：42.5，总成本：127.5，总收入：170}， {日期：5，总利润：2

我有一张剑道图，有2列系列和1行系列。单击事件仅适用于线系列。如何为列系列启用它？请参阅下面的代码

谢谢

剑道图，2列系列和1行系列


试验
var chartData=[]；
chartData.push(
{日期：1，总利润：25，总成本：75，总收入：100}，
{日期：2，总利润：27.5，总成本：82.5，总收入：110}，
{日期：3，总利润：37.5，总成本：112.5，总收入：150}，
{日期：4，总利润：42.5，总成本：127.5，总收入：170}，
{日期：5，总利润：23，总成本：69，总收入：92}，
{日期：6，总利润：26.5，总成本：79.5，总收入：106}，
{日期：7，总利润：29，总成本：87，总收入：116}，
{日期：8，总利润：30，总成本：90，总收入：120}，
{日期：9，总利润：31.5，总成本：94.5，总收入：126}，
{日期：10，总利润：19.5，总成本：58.5，总收入：78}，
{日期：11，总利润：22，总成本：66，总收入：88}，
{日期：12，总利润：24，总成本：72，总收入：96}，
{日期：13，总利润：26，总成本：78，总收入：104}，
{日期：14，总利润：35，总成本：105，总收入：140}，
{日期：15，总利润：40，总成本：120，总收入：160}，
{日期：16，总利润：33，总成本：99，总收入：132}，
{日期：17，总利润：32.5，总成本：97.5，总收入：130}，
{日期：18，总利润：30，总成本：90，总收入：120}，
{日期：19，总利润：27.5，总成本：82.5，总收入：110}，
{日期：20，总利润：25，总成本：75，总收入：100}，
{日期：21，总利润：26.5，总成本：79.5，总收入：106}，
{日期：22，总利润：29，总成本：87，总收入：116}，
{日期：23，总利润：31.5，总成本：94.5，总收入：126}，
{日期：24，总利润：32.5，总成本：97.5，总收入：130}，
{日期：25，总利润：34，总成本：102，总收入：136}，
{日期：26，总利润：34.5，总成本：103.5，总收入：138}，
{日期：27，总利润：35，总成本：105，总收入：140}，
{日期：28，总利润：37.5，总成本：112.5，总收入：150}，
{日期：29，总利润：4，总成本：12，总收入：16}，
{日期：30，总利润：42.5，总成本：127.5，总收入：170}
);
函数createChart（）{
var类别轴=[]；var valueAxis=[]；
var系列=[]；
推送（{field:“OverallRevenue”，name:“Revenue”，type:“line”，width:4，missingvalue:“interpolate”，markers:{visible:true}，stack:false，工具提示：{visible:true}，seriesClick:DetailChart_Click}）；
推送（{field:“OverallCost”，name:“Cost”，type:“column”，标记：{visible:false}，间距：0，工具提示：{visible:true}，stack:true，seriesClick:DetailChart_Click}）；
推送（{字段：“总体利润”，名称：“利润”，类型：“列”，标记：{visible:false}，间距：0，工具提示：{visible:true}，堆栈：true，序列单击：DetailChart_Click}）；
分类推进({
字段：“日期”，
标签：{
模板：“#=值”
},
主要生产线：{
可见：假
},
minorGridLines：{
可见：假
}
});
推({
标签：{
模板：“$#=值”
},
主要生产线：{
可见：正确
},
minorGridLines：{
可见：假
}
});
$（“#详细图表”）。肯多卡特({
数据源：chartData，
图例：{
位置：“底部”，
可见：正确
},
标题：{
文本：“测试图表”
},
转变：是的，
系列:系列,，
分类：分类，
工具提示：{
可见：假
},
valueAxis:valueAxis，
序列单击：详细信息图表\单击
});
}
功能详细信息图表\单击（e）{
警报（“点击”）；
}
createChart（）；

您使用什么版本？它似乎与最新版本配合得很好。是我尝试的。

我正在使用2012年第2季度的版本。我解决了将转换设置为false的问题。

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