如何在Chart.js多折线图中仅显示单个图例标签？

没问题！要实现只显示红色的low图例标签、同时保留蓝色High折线但隐藏其标签的效果，你可以利用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' 
    }, 
    // 新增图例过滤配置
    legend: {
      filter: function(item) {
        // 只显示标签为'low'的图例项
        return item.text === 'low';
      }
    },
    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>

关键说明 #

• 核心配置是在options.legend中添加filter函数：这个函数会遍历每个图例项，返回true则显示该图例，返回false则隐藏。这里我们只让标签文本等于low的项通过过滤，就实现了只显示红色标签的需求。
• 这个方法不会影响折线的渲染，蓝色的High折线依然会正常显示在图表上，只是图例里看不到它的标签，完全符合你的要求。

内容的提问来源于stack exchange，提问作者InFlames82