使用flask web应用程序中的highcharts饼图绘制数据

问题描述 投票：0回答：1

我试图从python函数绘制pandas数据帧，并使用Highcharts饼图将其显示在Web服务器上。我可以通过烧瓶将数据从函数传递到Web服务器作为json数据。但是当我想显示它时，图表是空的。通过Web控制台，我还确保进入Highcharts的数据格式是正确的，但仍然没有。

在这里，我正在检索熊猫数据框并通过烧瓶将其发送到Web服务器：

actype_json = actype.to_json(orient = 'records')

@app.route('/data/airport', methods = ['GET'])
def broadcast_data():
    return eval(json.dumps(actype_json))

@app.route('/')
def plotgraph():
    return render_template('airport.html')

在我的HTML文件中，我尝试使用AJAX来调用数据并将其绘制在Highcharts饼图中：

<!DOCTYPE html>
<html>
<head>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>

    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
    </script>

</head>
<body>

    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
    <script>

        function GetUpdatedData(){
            $.ajax({
              url: "/data/airport",
            })
              .done(function( data ) {
                  console.log( data );
                  DrawGraph(data);
                }); 
        }   

        function DrawGraph(dataset) {

            // Radialize the colors
            Highcharts.setOptions({
                    colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
                            return {
                                    radialGradient: {
                                            cx: 0.5,
                                            cy: 0.3,
                                            r: 0.7
                                    },
                                    stops: [
                                            [0, color],
                                            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                                    ]
                            };
                    })
            });

            // Build the chart
            Highcharts.chart('container', {
                    chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            type: 'pie'
                    },
                    title: {
                            text: 'Browser market shares in January, 2018'
                    },
                    tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                            pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                            enabled: true,
                                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                            style: {
                                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                            },
                                            connectorColor: 'silver'
                                    }
                            }
                    },
                    series: [{
                        name: 'Aircraft',
                        data: [dataset]
                }]
            });
            setTimeout(GetUpdatedData, 1500);
        }
    </script>

</body>
</html>

这是我看到的Highcharts饼图的屏幕截图：

enter image description here

响应选项卡显示尝试在Highchart上绘制的数据的格式。任何建议都会非常有帮助。谢谢！

javascript json ajax flask highcharts
1个回答
0
投票

在向series.data数组添加数据时，你犯了一个简单的错误。请注意，您的数据实际上是一个正确的Highcharts数据数组，其中包含点对象：

数据：

[{
  "AC TYPE": "B773",
  "y": 35
}, {
  "AC TYPE": "B77W",
  "y": 16
}]

但是，您已将此数组添加到另一个数组中：

series: [{
  name: 'Aircraft',
  data: [dataset]
}]

这为您提供了两个嵌套数组的无效数据格式：

  series: [{
    name: 'Aircraft',
    data: [[{
      "AC TYPE": "B773",
      "y": 35
    }, {
      "AC TYPE": "B77W",
      "y": 16
    }]]
  }]

删除包装数组，应正确呈现图表。

演示：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.