javascript 在chartJS和Flask中更改点标签

iyfjxgzm  于 2023-04-28  发布在  Java
关注(0)|答案(2)|浏览(130)

我想在Flask应用程序中更改ChartJS中创建的图表中的标签。即:
1.我渲染模板并传递对象results_lc,其中包含3个属性:日期时间
1.我使用chartJS创建了一个图表,在X轴上我有日期(标签),在Y轴上我有
1.现在我的问题是,特定的点标签也是,但我希望有
下面是我的代码:

<script>
                var ctx = document.getElementById("myAreaChart");
                var myLineChart = new Chart(ctx, {
                  type: 'line',
                  data: {
                    labels:
                    [{% for result in results_lc %}
                        '{{ result.date }}',
                    {% endfor %}],
                    datasets: [{
                      label: "FINA points",
                      lineTension: 0.3,
                      backgroundColor: "rgba(2,117,216,0.2)",
                      borderColor: "rgba(2,117,216,1)",
                      fill: true,
                      pointRadius: 5,
                      pointBackgroundColor: "rgba(2,117,216,1)",
                      pointBorderColor: "rgba(255,255,255,0.8)",
                      pointHoverRadius: 5,
                      pointHoverBackgroundColor: "rgba(2,117,216,1)",
                      pointHitRadius: 50,
                      pointBorderWidth: 2,
                      data: [
                      {% for result in results_lc %}
                        {{ result.fina_points }},
                    {% endfor %}],
                    }],
                  },
                  options: {
                    plugins: {
                      legend: {
                        display: false
                      }
                    }
                  }
                });
            </script>

先谢谢你了!

在这里,而不是国际泳联点:第612章我想要:游泳时间:00:52,80。
FINA积分和游泳时间在字典列表中传递给模板。
我尝试了不同的方法,但没有一个奏效:

yjghlzjz

yjghlzjz1#

在新的图表中,您有一个称为数据集的 prop 。标签:国际泳联积分.将其更改为所需的相应标签。

3pvhb19x

3pvhb19x2#

您表示要更改的是工具提示。它可以通过多种方式进行配置,正如您从文档中看到的。
但是首先你必须将times从python发送到脚本。一种方法是在脚本的开头声明一个新变量,遵循其他两个组件的方法(我假设这不是用户数据,并且您信任它):

const allTimes = [
    {% for result in results_lc %}
    '{{ result.time }}',
    {% endfor %}];

然后继续执行前面的脚本,使用var ctx = ...,但在plugins下的图表配置中添加工具提示的配置,并使用自定义label回调:

plugins: {
        legend: {
            display: false,
        },
        tooltip: {
            callbacks: {
                label: context => "swimtime: " + allTimes[context.dataIndex]
            }
        }
    }

应该可以了

相关问题