NFine.Web/Areas/ReportManage/Views/Highcharts/Sample8.cshtml

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>气泡图</title>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/Content/js/highcharts/highcharts.js"></script>
    <script>
        $(function () {
            $('#container').highcharts({

                chart: {
                    type: 'bubble',
                    zoomType: 'xy'
                },

                title: {
                    text: '主标题'
                },

                subtitle: {
                    text: document.ontouchstart === undefined ?
                        '框选放大' :
                        '手势放大'
                },

                series: [{
                    name: '类别1',
                    data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
                }, {
                    name: '类别2',
                    data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
                }, {
                    name: '类别3',
                    data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
                }]

            });

        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>