尝试使用justpy使高海图瀑布图工作，得到“JSON值结束后的意外文本”

Question

我正在尝试使用justpy来实现高海图瀑布图的工作，在JSON值结束后得到“意想不到的文本”。有人能在下面发现会导致html错误的错误吗？某个角色是不应该出现的？我对HTML没有很好的眼光。我正在使用python中的justpy应用程序来运行图表，谢谢

import justpy as jp

chart_def="""
{
    chart: {
        type: 'waterfall'
    },

    title: {
        text: 'Highcharts Waterfall'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'USD'
        }
    },

    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

    series: [{
            name: 'Start',
            y: 120000
        }, {
            name: 'Product Revenue',
            y: 569000
        }, {
            name: 'Service Revenue',
            y: 231000
        }, {
            name: 'Positive Balance',
            isIntermediateSum: true
        }, {
            name: 'Fixed Costs',
            y: -342000
        }, {
            name: 'Variable Costs',
            y: -233000
        }, {
            name: 'Balance',
            isSum: true
        }],
        dataLabels: {
            enabled: true
            },
            style: {
                fontWeight: 'bold'
            }
        },
        pointPadding: 0
    }]
}
"""

def app():
    wp = jp.QuasarPage()
    h1 = jp.QDiv(a=wp, text="Title here",classes="text-h2 text-center q-pa-md")
    hc = jp.HighCharts(a=wp,options=chart_def)    
    return wp

jp.justpy(app)

Answer 1

您的系列配置似乎有错误。尝试以下代码：

{
  chart: {
    type: 'waterfall'
  },

  title: {
    text: 'Highcharts Waterfall'
  },

  xAxis: {
    type: 'category'
  },

  yAxis: {
    title: {
      text: 'USD'
    }
  },

  legend: {
    enabled: false
  },

  tooltip: {
    pointFormat: '<b>${point.y:,.2f}</b> USD'
  },

  series: [{
    data: [{
      name: 'Start',
      y: 120000
    }, {
      name: 'Product Revenue',
      y: 569000
    }, {
      name: 'Service Revenue',
      y: 231000
    }, {
      name: 'Positive Balance',
      isIntermediateSum: true
    }, {
      name: 'Fixed Costs',
      y: -342000
    }, {
      name: 'Variable Costs',
      y: -233000
    }, {
      name: 'Balance',
      isSum: true
    }],

    dataLabels: {
      enabled: true
    },
    style: {
      fontWeight: 'bold'
    },
    pointPadding: 0
  }]
}

演示： https://jsfiddle.net/BlackLabel/80zfLta2/