0

Kendo UI Pro スイートを使用して SPA の作成をテストしています。現在、剣道 UI チャート (ドーナツ モード) に問題があります。グラフの SVG が IE 10 で正しくレンダリングされません。この問題は IE 11 または Firefox では発生しないようです。

JSFiddle の例: http://jsfiddle.net/m9vq7gu4/

ビューの Show イベントで、ajax API を呼び出してデータを取得します。

$.ajax({
    url: '/echo/json/',
    data: {
        json: JSON.stringify({
            "TotalHours": Math.random() * 714,
                "Budget": 714.6
        }),
        delay: 2
    },
    type: 'POST',
    success: function (response) {
        console.log(response);
        var data = [{
            value: response.TotalHours,
            color: "red"
        }, {
            value: response.Budget - response.TotalHours,
            color: "transparent"
        }];
        loadRadial(id, data);
    }
});

次に、div を kendoChart して更新します。

var dsRadial = new kendo.data.DataSource({
    data: data
});
dsRadial.read();
var radial = $("#" + id).kendoChart({
    dataSource: dsRadial,
    dataBound: function () {
        console.log("dataBound");
    },
    legend: {
        visible: false
    },
    seriesDefaults: {
        type: "donut",
        holeSize: 60,
        size: 20
    },
    series: [{
        field: "value",
        colorField: "color"
    }],
    chartArea: {
        background: "transparent"
    },
    tooltip: {
        visible: true
    }
}).data("kendoChart");

View/Layout/Router のすべてのイベントが正しく起動することを示します。最初はグラフが適切にバインドされていないと思いましたが、ページのソース コードを見ると、SVG が作成されています。

<svg xmlns="http://www.w3.org/2000/svg" style="left: 0px; top: -0.47px; width: 100%; height: 100%; overflow: hidden;" version="1.1"><defs><radialGradient id="5c7e3a1b-06a7-4665-bb46-44db26b308e7" gradientUnits="userSpaceOnUse" cx="409.5" cy="100" r="80"><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.75" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0.3;" offset="0.875" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.9975" /></radialGradient></defs><g><path fill="none" stroke="none" d="M 0 0 L 819 0 L 819 200 L 0 200 Z" /><path fill="none" stroke="none" d="M 5 5 L 814 5 L 814 195 L 5 195 Z" /><g><g /></g><g><g><g transform="matrix(1 0 0 1 0 0)"><path fill="red" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /></g><g transform="matrix(1 0 0 1 0 0)"><path fill="none" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /></g></g></g></g></svg>

本当に奇妙なのは、ルーターを別のページに切り替えるとすぐに、データが再び変更されるまで SVG が適切に表示されることです (これは、デモの [ホーム/データ] リンクをクリックすると表示されます)。Chart と View/Layout/Router の間の奇妙な問題以外に、これを引き起こしている原因は何ですか?

4

1 に答える 1

1

これは、バージョン 2013.2.1215 (内部ビルド) より前の Kendo UI の既知の問題です。

これは、IE10 SVG 実装の不具合が原因です。パスが 0 にスケーリングされると、変換がクリアされても消えます。

于 2015-01-05T08:31:48.657 に答える