Question

我尝试使用HighCharts但却无法显示。我应该提一下，我使用的是.NET MVC + Bootstrap。我正在为我的网页使用布局。不知何故，图表并没有显示出来。我不知道如何为布局页面做一个小提琴抱歉。

这是我的布局页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Test</title>

    <!-- Bootstrap core CSS -->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="~/Content/cover.css" rel="stylesheet">
    <link href="~/Content/Site.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="~/Scripts/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="site-wrapper">

        <div class="site-wrapper-inner">

            <div class="cover-container">

                <div class="masthead clearfix">
                    <div class="inner">
                        <h3 class="masthead-brand">Test</h3>
                        <nav>
                            <ul class="nav masthead-nav">
                                <li><a href="/Home">Startpagina</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                @RenderBody()
                <div class="mastfoot">
                    <div class="inner">
                        <p>Test</p>
                    </div>
                </div>

            </div>

        </div>

    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="~/Scripts/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

这是实际页面：

    <div class="panel panel-default">
    <div id="chart_panel"
         style="width:100%;height:314px"></div>
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script>
    $(function () {
        $('#chart_panel').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>

Answer 1

将您的脚本包含在页面顶部，如此Fiddle

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    //write above two lines inside your head tag  
    <div class="panel panel-default">
        <div id="chart_panel" style="width:100%;height:314px"></div>
    </div>

<强>更新

由于发现控制台错误，未定义jquery。在页面上定义一次并删除任何重复的包含。

Answer 2

在你的jsfiddle中你使用过

$('#container').highcharts

而不是这个你必须传递div chart_panel

的id

$('#chart_panel').highcharts

并将脚本添加到外部资源，这意味着将其添加到头标记

中

工作示例jsfiddle： https://jsfiddle.net/swapnilmotewar/cbq3Lj4s/2/

图表不可见

2 个答案: