highcharts 旋转显示HighMap数据标签

5sxhfpxr  于 2022-10-15  发布在  Highcharts
关注(0)|答案(1)|浏览(200)

我尝试在JustPy中显示一些Map结果,但JustPy中的HighMap数据标签显示为旋转,但只有标签旋转,而Map本身没有旋转。

import justpy as jp

my_chart_def = """
{
 chart: {
    map: 'custom/europe',
    borderWidth: 1
  },

  title: {
    text: 'Nordic countries'
  },

  subtitle: {
    text: 'Demo of drawing all areas in the map, only highlighting partial data'
  },

  legend: {
    enabled: false
  },

  series: [{
    name: 'Country',
    data: [
      ['is', 1],
      ['no', 1],
      ['se', 1],
      ['dk', 1],
      ['fi', 1]
    ],
    dataLabels: {
            enabled: true,
            color: '#FFFFFF'
        },
    }]
}
"""

def chart_test():
    wp = jp.WebPage()
    wp.head_html = """
    <script src="https://code.highcharts.com/maps/9.2.2/highmaps.js"></script>
    <script src="https://code.highcharts.com/mapdata/custom/europe.js"></script>
    """
    my_chart = jp.HighCharts(a=wp, classes='m-2 p-2 border w-1/2 h-screen', options=my_chart_def)
    my_chart.options.chart.type = 'map'
    my_chart.options.series[0].name = 'Test chart'
    my_chart.options.title.text = 'Data'
    return wp

jp.justpy(chart_test)

这是我得到的:

如果将Map旋转90度,则会看到以下内容,标注看起来像是对齐的

idv4meu8

idv4meu81#

我已经在编辑器中重现了您的示例,并且一切似乎都是正确的https://jsfiddle.net/BlackLabel/6g92m7br/,因此问题发生在公正的方面。
然而,自9.3.0以来,Highcharts Maps改进了几何学https://www.highcharts.com/blog/changelog/#highcharts-maps-v9.3.0,这可能会影响其他框架的行为。我建议直接联系JustPy开发人员。
作为一种解决方法,您可以尝试设置xydataLabels位置,例如:

plotOptions: {
    series: {
      dataLabels: {
        x: 15,
        y: -50
      }
    }
  }

演示:https://jsfiddle.net/BlackLabel/bnejx2kc/
API参考:https://api.highcharts.com/highmaps/plotOptions.map.dataLabels.xhttps://api.highcharts.com/highmaps/plotOptions.map.dataLabels.y

相关问题