Highcharts饼图及折线图在JustPy框架下无法渲染问题咨询

问题原因及解决方法 #

你遇到的是JustPy集成Highcharts的两个常见问题：

• 配置格式错误：你写的chart_options是JavaScript对象字面量格式，不是标准JSON，JustPy解析这类字符串时会抛出语法错误，直接终止图表渲染。
  两种解决方式可选：要么把配置中所有键用双引号包裹，转为标准JSON格式；更稳妥的方式是直接用Python字典存储配置，JustPy会自动完成序列化，不会出现格式兼容问题。
• 模块依赖缺失：饼图、带特殊配置的折线图不属于Highcharts基础包支持的功能，需要额外加载对应扩展模块才能正常渲染。

修改后可正常运行的饼图代码 #

import justpy as jp

# 改用Python字典存储配置，避免JSON格式错误
chart_options = {
    "chart": {
        "plotBackgroundColor": None,
        "plotBorderWidth": None,
        "plotShadow": False,
        "type": 'pie'
    },
    "title": {
        "text": 'Browser market shares in January, 2018'
    },
    "tooltip": {
        "pointFormat": '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    "accessibility": {
        "point": {
            "valueSuffix": '%'
        }
    },
    "plotOptions": {
        "pie": {
            "allowPointSelect": True,
            "cursor": 'pointer',
            "dataLabels": {
                "enabled": True,
                "format": '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    "series": [{
        "name": 'Brands',
        "colorByPoint": True,
        "data": [{
            "name": 'Chrome',
            "y": 61.41,
            "sliced": True,
            "selected": True
        }, {
            "name": 'Internet Explorer',
            "y": 11.84
        }, {
            "name": 'Firefox',
            "y": 10.85
        }, {
            "name": 'Edge',
            "y": 4.67
        }, {
            "name": 'Safari',
            "y": 4.18
        }, {
            "name": 'Sogou Explorer',
            "y": 1.64
        }, {
            "name": 'Opera',
            "y": 1.6
        }, {
            "name": 'QQ',
            "y": 1.2
        }, {
            "name": 'Other',
            "y": 2.61
        }]
    }]
}


def app():
    wp = jp.QuasarPage()
    h1 = jp.QDiv(a=wp, text="Testing Pie chart",
                 classes="text-h3 text-center q-py-xl q-px-xl")
    # 加载饼图、无障碍功能需要的额外扩展模块
    hc = jp.HighCharts(a=wp, options=chart_options, 
                       highcharts_modules=['highcharts-more', 'modules/accessibility'])
    return wp

jp.justpy(app)

如果你不需要无障碍功能，可以直接删除配置中的accessibility节点，同时去掉modules/accessibility的加载声明即可。

你遇到的折线图渲染异常也是相同逻辑：先确认配置格式是否符合要求，再检查折线图用到的特殊配置是否需要加载对应扩展模块。

内容的提问来源于stack exchange，提问作者Oleksandr Yanov