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

Question

I am working with pie charts using Canvasjs and I want to make it clickable so that if the specific label is clicked it will send the clicked label value to the flask so that I can process that value in the flask also redirect me to the other page
我在 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路由 jazz_index并且我还想知道如何在路由 jazz_index中访问该变量值，以便我可以处理该数据点值并将图表重定向到包含与该数据点相关的信息的新页面 (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
    datapoinr = request.args.get('dataPoint')

    return render_template('jazz_index.html')