1

なぜ私はいつも最も奇妙な問題を抱えているのかわかりません。剣道UIチャートを使用しています。これは PartialView にあります。PartialView が jQuery によって呼び出されると、実行時に div といくつかの jQuery コードが生成されます。テーブル行のクリックされた行の下に、div と JQ コード全体を追加します。問題は、div のみを追加し、チャートのレンダリングに必要な script タグとそのコードを無視することです。

私のPartialViewは次のとおりです。

@(Html.Kendo().Chart()
        .Name("XXXProducts")
        .Title("XXX Products")
        .Legend(legend => legend
            .Visible(false)
        )
        .ChartArea(chartArea => chartArea
            .Background("transparent")
        )
        .Series(series =>
        {
            series.Bar(Model.SalesAxis).Name("Total Sales");
        })
        .CategoryAxis(axis => axis
            .Categories(Model.MonthsAxis)
            .MajorGridLines(lines => lines.Visible(false))
        )
        .ValueAxis(axis => axis
            .Numeric()
            .Max(Model.SalesAxis.Max() + 100)
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= series.name #: #= value #")
        )
)

ビューをレンダリングするための他のページの私のjQueryコード：

    function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        chartData = "<tr style='height:300px;'><td colspan='5'>" + data + "</td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
    });
}

「chartData」に警告すると、次のように表示されます。

<tr><td colspan='5'><div class="k-chart" id="XXXProducts"></div><script>    jQuery(function(){jQuery("#XXXWaterProducts").kendoChart({"chartArea":{"background":"transparent"},"title":{"text":"Site Visitors Stats /thousands/"},"legend":{"visible":false},"series":[{"name":"Total Sales","type":"bar","data":[56000,74500,45000,86000,49850,63482,97600,63250,79860,42100,32010,89200]}],"categoryAxis":[{"majorGridLines":{"visible":false},"categories":["January","February","March","April","May","June","July","August","September","October","November","December"]}],"valueAxis":[{"majorGridLines":{"visible":true},"line":{"visible":false},"max":97700}],"tooltip":{"template":"#= series.name #: #= value #","visible":true}});});</script> </td></tr>

しかし、ソースを確認すると、次のようにしか表示されません。

<tr><td colspan='5'> <div class="k-chart" id="XXXProducts"></div></td></tr>

scripts タグがどこにもありません。

4

1 に答える 1

1

クライアント側のコードを生成することはお勧めできません。あなたの場合、生成されたdivのデータ属性でjsonデータを返す方がよいでしょう。JSON.parse()その後、チャートを作成するメソッドと実行メソッドを使用して、データ属性からオブジェクトへの文字列を解析できます。

function RenderChart(row) {

    var rowIndex = $("#tblDetail").find($(row)).index() + 1;
    var chartData = '';

    $.get('@Url.Action("MonthlyChart", "Chart")', function (data) {
        var dataObj = JSON.parse(data);
        chartData = "<tr style='height:300px;'><td colspan='5'></td></tr>";
        $('#tblDetail tr:nth-child(' + rowIndex + ')').after(chartData);
        $("#XXXWaterProducts").kendoChart(dataObj);
    });
}

@Url.Action("MonthlyChart", "Chart") を変更して、json データを含む文字列のみを返す必要があります。また、JsonResul タイプを返し、$.getJSONメソッドを使用して、json 解析の使用を避けることもできます (var dataObj = JSON.parse(data);)。

于 2013-06-26T08:39:08.603 に答える