Question

    // Initiate the chart
    $('#container_origin').highcharts('Map', {
		
		
        title : {
            text : 'Heat Map Of Visited Orgins'
        },

        subtitle : {
            text : ''
        },
		

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

			colorAxis: {
                min: 1,
                type: 'logarithmic',
                minColor: '#338ACA',
                maxColor: '#1B4761'
            },
			
			

        series : [{
		
		
            data : data,
            mapData: Highcharts.maps['custom/world-highres'],
            joinBy: 'hc-key',
            //name: 'Random data',
            states: {
                hover: {
                    color: Highcharts.getOptions().colors[6]
                }
            },
			
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            },
			tooltip: {
                headerFormat: '',
            }
			
			
			
        }]
    });

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/highcharts-more.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		
		<!--Use this for maps/chart combo -->
		<script src="http://code.highcharts.com/maps/modules/map.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="chart.css">
		<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>
		<script src="bb.js"></script>

		
	</head>

我在同一页面上渲染高图和高图时遇到问题。起初，我刚刚收到错误，但后来我换了。

    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/mapdata/custom/world-highres.js"></script>

有了这个 -

<script src="http://code.highcharts.com/maps/modules/map.js"></script>

我现在得到图表的外线（见img）。有人可以提出解决方案吗？

Answer 1

正如您可以从this getting started tutorial / Highmaps documentation看到的Highmaps工作，您需要加载same as in Highcharts and Highstock，框架 - jQuery或独立的Highcharts框架，并且：

1）highmaps.js

<script src="http://code.highcharts.com/maps/highmaps.js"></script>

或者，如果您拥有Highcharts和Highmaps的许可证，2）highcharts.js + maps.js模块

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>

工作示例： http://jsfiddle.net/pe40p00y/14/

Answer 2

我有饼图，柱形图和股票图，并且很难将Map与之集成。我发现这些行可以解决此问题：

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

这是我得到的结果。

您必须将地图链接为模块。

Answer 3

您不应同时使用Highmaps和map模块。您可以将地图模块用作Highcharts的插件：

<script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

文档 https://www.highcharts.com/docs/maps/getting-started

无法在同一页面上显示高地图和高图表？

3 个答案: