1

JavaScriptとASP.NETの使い方を学んでいます。HighCharts を使用したいのですが、レンダリングの問題が発生しています。私はここで質問を調べましたが、それらの多くは私の問題とは関係がないようです。

これは私の特定のビューのコードです。

@{
   ViewBag.Title = "Summary";
}

@section HeadContent{
<script src="../../Scripts/HighCharts/highcharts.js" type="text/javascript" ></script>
<script src="../../Scripts/HighCharts/exporting.js" type="text/javascript"></script>

<script type="text/javascript">

    var chart;

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                type: 'column',
                renderTo: 'container'
            },

            title: {
                text: 'Code Coverage Per Baseline'
            },

            subtitle: {
                text: 'Click and drag in the plot area to zoom in'
            },
            xAxis: {
                categories: [11.5, 12.5],

                labels: {
                    rotation: -45,
                    align: 'right'
                }
            },

            yAxis: {
                min: 0,

                title: {
                    text: 'Coverage Percentage ( % )'
                }
            },

            tooltip: {
                formatter: function() {
                    return '' + this.x + ":" + this.y;
                }
            },

            plotOptions: {
                column: {
                    pointPadding: 0.2,

                    borderWidth: 0
                }
            },

            series: [{
                name: 'Function Coverage',
                data: [12, 82]
                }, {
                    name: 'Condition Coverage',
                    data: [74, 32]
                }]
        });

    });

</script>

}

@section Toolbar
{
    <div class="navbar-inner">
        <ul class="nav">
            <li>@Html.ActionLink("<< Back to Summary", "Index")</li>
        </ul>
    </div>
}

<h2>Summary Information</h2>
<div id="container" style="width: 860px; height: 400px; text-align: center"></div>

私の_Layout.cshtmlファイルでは、これらを参照しています..

@RenderSection("HeadContent", false)
@Scripts.Render("~/Scripts/jquery-1.9.1.min.js")
@Scripts.Render("~/Scripts/jquery.color-2.1.2.min.js")

色を変更したり、JavaScript を移動したり、jsFiddle を使用してコードをチェックしたりしました。それを変えるものは何もないようです。

評判が良くないので、ここにスクリーンショットを投稿することはできませんので、説明します。*写真へのリンク*

何が起こるかというと、サイトから特定のビューに移動してグラフを正常にロードすると、表示されないのはバーの色だけです。それらを選択すると、それらの値が何であるかが表示されます。chrome のデバッガーに入ると、バーごとに生成されたソース コードを強調表示して見ることができます。唯一の問題は、fill="rgb(192,192,192)" と fill-opacity="0.000001" であることです。これは問題の一部です。基本的に不透明度が 0 のデフォルトの灰色に設定されている理由がわかりません。(上のリンクですべて表示されます)

誰かが以前にこれに遭遇したか、確認すべきいくつかのことを知っている可能性がある場合は素晴らしいでしょう. どんな提案も素晴らしいでしょう、ありがとう!

これは潜在的な問題でしょうか？ボディが作成された後、他のスクリプトが実行されているように見える場所はどこですか? JavaScript のレンダリングに問題がある可能性はありますか?

編集 * - グラフを png または jpeg にエクスポートすると、色が存在し、正常にレンダリングされることを忘れていました。これが役立つかどうかはわかりませんが、非常に小さなものが欠けていると思います。

4

0 に答える 0