如何在多行字符中只显示一个标签？答案

【问题标题】：How to display only one label in a multi line char?如何在多行字符中只显示一个标签？
【发布时间】：2020-01-30 12:19:07
【问题描述】：

我用 chart.js 创建了一个图表。该图有两条线。所以它默认也显示两个标签。但是我需要一种配置，例如应该出现红色标签，而应该隐藏蓝色标签。标签不是行！！

感谢您的帮助

var config = {
  type: 'line',
  data: {
    labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
    datasets: [{
      label: 'High',
      backgroundColor: 'blue',
      borderColor: 'blue',
      data: [10.43, 10.42, 10.44, 10.43, 10.40],
      fill: false,
    }, {
      label: 'low',
      fill: false,
      backgroundColor: 'red',
      borderColor: 'red',
      data: [8.43, 8.5, 8.39, 8.38, 8.38],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Test'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Time'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    }
  }
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>


<canvas id="dia"></canvas>

【问题讨论】：

是您所指的图例还是悬停时行上的工具提示.. 如果图例则参考stackoverflow.com/questions/57528694/…
我指的是传说。您链接中的示例未显示这两个值。
@InFlames82：那么，例如，图例是否应该只包含“Heigh”并在单击时只隐藏“Heigh”行？难道根本不可能隐藏“低”线吗？
不，不能隐藏“低”行。

标签： javascript chart.js

【解决方案1】：

您可以使用legend.labels.generateLabels 和legend.onClick 操作来实现此目的。

var config = {
    type: 'line',
    data: {
        labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
        datasets: [{
            label: 'High',
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [10.43, 10.42, 10.44, 10.43, 10.40],
            fill: false,
        }, {
            label: 'low',
            fill: false,
            backgroundColor: 'red',
            borderColor: 'red',
            data: [8.43, 8.5, 8.39, 8.38, 8.38],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Test'
        },
        legend: {
            labels: {
                generateLabels: chart => {
                    let dataset = chart.data.datasets[0];
                    return [{                        
                        chart: chart,
                        text: dataset.label,
                        fillStyle: dataset.backgroundColor,
                        strokeStyle: dataset.borderColor,
                        hidden: chart.getDatasetMeta(0).hidden
                    }]
                }
            },
            onClick: (mouseEvent, legendItem) => {
              legendItem.chart.getDatasetMeta(0).hidden = !legendItem.hidden;
              legendItem.chart.update();
            }
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        }
    }
};
var ctx = $('#dia');
new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>

【讨论】：