带有if语句的chart.js标签

Question

出于交易目的，我正在尝试基于html标签文本设置chart.js标签。作为javascript的初学者，这有点挑战。

这是我想要做的：

html代码：

     <div class="col-lg-6">
                  <div id='tag4' class="card-footer small text-muted">{% trans 'ITEMS IN DIFFICULTY' %}</div>
                <div class="bar-chart block">
                  <canvas id="myChart3" height="175"></canvas>
                </div>

和我的chart.js代码：

     var myChart3 = new Chart(ctx3, {
                        type: 'bar',
                        data: {
                            labels: labels3,
                            datasets: [{
                                label: if (document.getElementById('tag4').value == 'ITEMS IN DIFFICULTY') {'low performing items (quantity sold/week)'}
                                else {'references en difficulté (quantité vendu/semaine)'},
                                data: defaultData3,
                                backgroundColor: [
                                  'rgba(255, 99, 132, 0.2)',

                                ],
                                borderColor: [
                                   'rgba(255, 99, 132, 1)',

                                ],
                                borderWidth: 1
                            }],
                            options: {
                                scales: {
                                    yAxes: [{
                                        gridLines: {
                                            drawOnChartArea: false,
                                          ticks: {
                                            beginAtZero: true
                                        }

                                            }
                                    }],
                                }
                            }
                        }
                    })

结果是该图未显示。我不确定问题是否是因为我的if语句出了点问题，或者不是chart.js标签可以解决的问题。任何帮助都超过了欢迎！

Answer 1

您需要的是三元运算符，它的工作方式如下：

let isTrue = true
let a = isTrue ? 1 : 0

如果isTrue为真，则a为1，如果为假，a为0

根据您的情况，您可以将以下内容作为标签传递：

document.getElementById('tag4').textContent == 'ITEMS IN DIFFICULTY' ? 'label if true' : 'label if false'