0

我找到了一个链接，该链接解释了当用户单击楔形时如何分解饼图部分（http://jsfiddle.net/derickbailey/FXs6b/) 但它对我不起作用。据我所知，它似乎没有更新绑定到图表的explodeFiled 的数据源字段。单击饼图部分时会调用 createChart() 函数，但它不会分解该部分。该示例运行良好，但如果我尝试将其应用于我自己的代码，则不行。我还有一个连接到同一个数据源的剑道网格。网格是可编辑的，如果我“检查”记录的 Exploded 字段，饼图会爆炸。我还删除了网格，认为可能附加到同一数据源的 2 个控件导致了问题，但这也不起作用。谁能看到我的代码有什么问题？你可以在这里看到我的代码示例：http: //jsfiddle.net/ihatemash/d5yR7/

我的类包含要在图表中显示的数据：

public partial class GetTotals_Result
{
    public Nullable<int> Total { get; set; }
    public int PETypeID { get; set; }
    public string Description { get; set; }
    public bool Exploded { get; set; }
}

我的cshtml文件中的代码：

        var mdl = @Html.Raw(Json.Encode(Model));

        var tempcontext = new kendo.data.DataSource(
            { data: mdl });

        function createChart() {
            $("#piechart").kendoChart({
                title: {
                    position: "bottom",
                    text: "Totals Pie Chart"
                },

                dataSource: tempcontext,

                series: [{
                    type: "pie",
                    field: "Total",
                    categoryField: "Description", 
                    explodeField: "Exploded",
                    labels: { visible: true},                        
                }],

                seriesClick: function(e){
                    $( e.sender.dataSource.options.data ).each( function ( i, item ) {
                        if ( item.Description != e.category )
                        {
                            item.Exploded= false;
                        }
                        else
                        {
                            item.Exploded= true;
                        }
                    } );
                    createChart();
                }

            });
        }
        setTimeout(function() {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createChart();

            $("#example").bind("kendo:skinChange", function(e) {
                createChart();
            });
        }, 400);
4

1 回答 1

1

我相信数据源永远不会更新（您将“Hydro”定义为exploded设置为true）。但是，如果您按照此 jsfiddle所示设置数据源，则会发生爆炸。如果您选择使用在函数范围之外定义 dataContext 变量的原始模式，我相信您可能需要在系列点击事件中手动更新数据源中的 dataItem。

 function createChart() {
                $("#piechart").kendoChart({
                    title: {
                        position: "bottom",
                        text: "Patient Encounter Totals by Encounter Type - Pie"
                    },
                    legend: {
                        position: "bottom",
                        padding: {right: 20, left: 20},
                        border: { width: 1}
                    },
                    dataSource: { data: data },
                    ... 
  }
于 2014-05-08T18:17:46.053 回答