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