单击 Canvasjs 饼图中的特定标签时，将单击的标签传递给 Flask 进行进一步处理

Question

我正在使用 Canvasjs 处理饼图，我想让它可以点击，这样如果点击了特定的标签，它就会将点击的标签值发送到烧瓶，这样我就可以在烧瓶中处理该值并重定向我到另一页
我在 index.html 页面上的图表代码

{%extends "master.html"%}

{%block chart%}
<script>
  window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
     exportEnabled: false,
  theme: "light1", // "light1", "light2", "dark1", "dark2"
   backgroundColor: "transparent",
    **data: [{
      click: function (e) {
                            var dataPoint = e.dataPoint.label;
                            window.open({{url_for('jazz_index')}}, "_blank");
                    },**
        type: "doughnut",
        startAngle: 20,
        //innerRadius: 10,
        indexLabelFontSize: 17,
        indexLabelFontColor: "white",
        indexLabel: "#percent%",
        toolTipContent: "<b>{label}:</b> {y} (#percent%)",
        dataPoints: [

        {%for outgoing_number,outgoing_call_type in outgoing_calls%}
        { y: {{outgoing_call_type}}, label: "{{outgoing_number}}" },
            {%endfor%}
            ]
    }]
});
chart.render();
}
</script>

{%endblock%}

{%block body%}
<div class="card-body" id="chartContainer" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 90%;">
                    </div>
{%endblock%}

在这段代码中，我正在制作一个饼图，我想将变量 dataPoint 传递给 flask route jazz_index 当在饼图上单击特定栏时，我还想知道如何在 路径 jazz_index[=28= 中访问该变量值] 这样我就可以处理该数据点值并将图表重定向到包含与该数据点相关的信息的新页面 (jazz_index.html)。

这是我的jazz_index路线

@app.route('/jazz', methods=['GET', 'POST']) def jazz_index(): return render_template('jazz_index.html')

请帮我写一些代码。 提前致谢

Answer 1

您使用的方法并不理想，有很多方法可以改进它。

让浏览器打开一个新页面只是为了向后端发送数据并不是很好的用户体验。

另外，当您的 Javascript 最终运行时，url_for 的代码已经执行并呈现出 url。 url_for 不可能像您尝试的那样动态包含来自 Javascript 的值。

无需深入研究为使该产品准备就绪所需的前端更改，您可以通过采用类似于以下的方法使其“正常工作”，然后从那里进行改进。

{
    data: [{
        click: function(e) {
            var dataPoint = e.dataPoint.label;

            var url = `{{url_for('jazz_index')}}`;

            fetch(url + `?dataPoint=${dataPoint}`)
                .then(response => response.json())
                .then(data => console.log(data));
        }
    }]
}

然后在 Flask 中你需要从 url 参数中获取数据。

@app.route('/jazz', methods=['GET', 'POST'])
def jazz_index():
    # import request from Flask
    datapoint = request.args.get('dataPoint')

    return render_template('jazz_index.html')

单击 Canvasjs 饼图中的特定标签时，将单击的标签传递给 Flask 进行进一步处理

On clicking the specific label in Canvasjs Pie chart, pass the clicked label to Flask for further processing

python

charts

clickable

flask

canvasjs