dth8312
dth8312
2016-09-20 02:55

highcharts无法在网站上工作

I'm a new by in javascript. I want to plot a stack bar chart by using highcharts in my website. I copy the demo code here, then paste it in my php localhost, but there's no highcharts in my website. what's the problem?

code↓

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#container").highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [9, 10, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [8, 5, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [7, 7, 4, 2, 5]
        }]
    });
});
</script>

</head>

<body>
  <h2 align="center">HighCharts.js demo</h2>
  Where's the plot?<br>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dphfwzn8269 dphfwzn8269 5年前

    Just change the script that invokes jquery and make it load before the highcharts. This is necessary because Highcharts is built on top of jquery and without it loaded before the highcharts source, it will cause errors.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    
    点赞 评论 复制链接分享

相关推荐