标签: highmaps

我有一个页面,其中包含报表功能的图表和地图菜单.然后,我选择Highchart-Highmap库来达到上述目的.图表功能运行良好但是当我开发地图功能时会出现错误

TypeError:ma不是函数

• 我已经跟踪了ma函数出现在highchart.js和highmaps.js中的问题,但我不知道如何解决这个冲突.
• 我试着投入jQuery.noConflict();到地图但冲突仍然存在

这是我在主页面中的代码

... some html code
<script type="text/javascript" src="././js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="././js/highcharts/highcharts-3d.js"></script>            
<script type="text/javascript" src="././js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="././js/highcharts/modules/exporting.js"></script>

... some html code
<script type="text/javascript" src="././js/Highmaps/highmaps.js"></script>
<script type="text/javascript" src="././js/Highmaps/modules/data.js"></script>                
<script type="text/javascript" src="././js/Highmaps/modules/exporting.js"></script> 

我怎么解决这个问题？

这是我的片段,

output$map <- renderHighchart({
region_map = hcmap("countries/nz/nz-all")
      highchart(type = "map") %>% 
      hc_title(text = "Average") %>% 
      hc_add_series_map(map = region_map, df = data1, joinBy = "name", value = "LTA", borderColor = "#141B4D",
                        color = "color", 
                        showInLegend = TRUE, 
                        borderWidth = 1)
                        )  %>%
      hc_tooltip(useHTML = TRUE, headerFormat ="", pointFormat = "{point.name} <br> LTA: {point.value}") %>%
  })

我的数据在这里,

structure(list(name = c("Auckland", "Bay of Plenty", "Canterbury", 
"Central North Island", "Central Otago / Lakes District", "Coromandel"
), LTA = c(23, 42, 25, 69, 71, 145), …

我想用.Net Core项目在后面渲染地图文件

因此,目的是在Javascript中间件上执行Highmaps库,并将svg文件导出到"node-export-server".

我有一个API从客户端接收一些数据.我想用Highmap库生成SVG映射文件,然后发送到另一个API,它将包含一个中间件来执行PNG/JPG/...导出的节点模块.

将svg文件传递给"node-export-server"模块的方法是什么？我阅读了副文档,但我没有找到方法......(https://github.com/highcharts/node-export-server/blob/master/README.md)

我想通过此示例传递我的SVG文件.

//Include the exporter module
const exporter = require('highcharts-export-server');

//Export settings 
var exportSettings = {
    type: 'png',
    options: {
        title: {
            text: 'My Chart'
        },
        xAxis: {
            categories: ["Jan", "Feb", "Mar", "Apr", "Mar", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        series: [
            {
                type: 'line',
                data: [1, 3, 2, 4]
            },
            {
                type: 'line',
                data: [5, 3, 4, 2]
            }
        ]
    }
};

//Set up a pool of PhantomJS workers
exporter.initPool();

//Perform …

我正在策划一个标准的Geojson of Us.如果我用其他工具绘制geojson而不是保持纵横比,但是当我用HIghcharts/Highmaps尝试它时,它会变形或水平拉伸.参见下图.

预期:

实际:

我希望能够改变这整个地图的颜色.我正在使用地图泡泡我希望国家和大陆的颜色更深.我怎样才能实现这一点,因为colorAxis将改变数据表示(气泡)颜色而不是地图颜色.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/map-bubble/

显然这不起作用:(

colorAxis : {
  color: 'red'  
},

$('#container').highcharts('Map', {

        title : {
            text : 'Highmaps basic demo'
        },

        subtitle : {
            text : 'Source map: <a href="http://code.highcharts.com/mapdata/custom/africa.js">Africa</a>'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0
        },

        series : [{
            data : data,
            mapData: Highcharts.maps['custom/africa'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
});

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/africa 我正在使用这个小提琴,我想得到国名关于国家的点击事件.任何人都可以帮助我的示例或链接到这个API？我读了API但找不到,我想我错过了一些观点.提前致谢

Highmaps/highcharts是一个javascript/jquery适配器,可以在浏览器中呈现地图等.

我有一个突出显示单个国家/地区的地图,但是,(世界)地图的比例是这样的,我想在地图加载到相关国家后放大.

看看API我觉得这是可能的.

有一个事件监听器,这样我就可以在加载时执行自定义函数.如此示例所示,在负载上添加一个系列(Js小提琴)

此外,还有一种方法mapZoom允许您使用以下参数指定要缩放的点:

mapZoom(数字howMuch,[Number centerX],[Number centerY],[Number mouseX],[Number mouseY])

但是当我尝试调用这个方法onload(我的代码尝试如下,JS 在这里捏)时,没有任何反应.

$(function () {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {

        // Assign id's
        $.each(data, function () {
            this.id = this.code;
        });

        // Initiate the chart
        $('#container').highcharts('Map', {
            chart: {
                events: {
                    load: function () {
                    mapZoom(0.5, 100, 100);
                    }
                }
            },
            title: {
                text: 'Zoom on load attempt'
            },


            legend: {
                title: {
                    text: 'Population density per km²'
                }
            },

            colorAxis: {
                min: 1,
                max: 1000, …

我正在使用以下文档构建一个highcharts highmap:http://api.highcharts.com/highmaps/tooltip.style

而且我已经成功地按照我希望它的颜色和内容的方式设置我的工具提示.

这是我目前的情况:

这就是我需要的东西(工具提示上的小箭头或胡萝卜)

通常我会通过使用HTML来创建它:after或:before和relative locate但是我很难知道如何在highcharts中执行此操作.我知道我可以设置useHtml:true然后将css应用于渲染工具提示的类,但我觉得必须有一种方法可以自动让工具提示通过highcharts中的prop来实现这一点吗？

这是我目前用于高图的代码:

let config = {
  tooltip: {
      backgroundColor: '#ff9600',
      borderWidth: 1,
      borderColor: '#ff9600',
      borderRadius: 2,
      formatter: function () {
          return '<b>' +
          '<span style="'+ tooltipStyle + '">' + this.point.name + ': $ 620 USD</span><br>' +
          '<span style="'+ tooltipStyle + '">' + this.point.value + ' Transactions</span>';
      }
  },

  series:[{
    allAreas: true,
    data: data,
    mapData: mapsPathData,
    joinBy: [countryCode],
    dataLabels: {
        enabled: false,
        format: '{point.name}'
    }
  }]

};

我在使用Highmaps显示热图数据和地图上的点时遇到问题.这是一个例子:

http://jsfiddle.net/3se9q3uq/

这是美国钻取地图(http://www.highcharts.com/maps/demo/map-drilldown)的开箱即用示例,但我已对其进行了修改,以便在深入了解伊利诺伊州我试图在地图上添加一个单点(在一系列中).

以下是我用来执行此操作的代码段:

chart.addSeries({
  id: 'points',
  type: 'mappoint',
  name: 'Store Data',
  color: Highcharts.getOptions().colors[8],
  data: [{
    name: 'Point 1',
    lat: 40.0633,
    lon: -88.2498
  }]
});

结果(如果您打开浏览器控制台)是一个错误说明:

Highcharts错误#22:www.highcharts.com/errors/22

我试过转换坐标系,而不是绘制X和Y:

var pos = chart.fromLatLonToPoint({
   lat: json[i].latitude,
   lon: json[i].longitude
});

但这不起作用,因为它无法转换点,为X返回0,为Y返回null.我也尝试更改地图类型,但这也不起作用.

我可以创建一个只有点的地图而不向下钻取,但我似乎无法获得具有相同效果和点数的钻取效果(颜色)的热图层.我没有看到他们身边任何地方列出关于点和向下钻取/着色段的限制.

有没有人能够让这个工作吗？我是否一直在考虑这些地图图层,这是不可行的？

我可以在页面上显示地图.但是,当我使用鼠标中间滚动按钮(Logitech鼠标)向上或向下滚动页面时,地图会放大和缩小.我希望禁用它.

我该怎么做？谢谢!