Question

我正在学习如何使用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检查我的代码。似乎没有什么改变它。

由于我没有足够的声誉，我不能在这里张贴屏幕截图，所以我会解释。 *Link to picture*

我会通过网站转到特定视图并加载图表，但唯一没有出现的是条形图的颜色。我可以选择它们，它会显示它们的价值。当我进入chrome的调试器时，我能够突出显示并查看每个条形码的生成源代码。唯一的问题是fill =“rgb（192,192,192）”和fill-opacity =“0.000001”。这是问题的一部分。不确定为什么将它们设置为默认的灰色，基本上为0不透明度。（所有在上面的链接中都可见）

如果有人之前遇到过这种情况，或者可能知道要检查的一些事情，那将会很棒。任何建议都会很棒，谢谢！

Would this be a potential problem? 在创建正文后，其他脚本似乎正在运行？可能存在javascript渲染问题吗？

编辑* - 我忘了提到当我将图形导出到png或jpeg时，颜色就在那里并呈现正常。不确定这是否有帮助，但我只是觉得我错过了一些非常小的东西。

HighCharts不会在条形图中呈现颜色

0 个答案: