如何在多行字符中仅显示一个标签? [英] How to display only one label in a multi line char?

问题描述

我用chart.js创建一个图表.该图有两条线.因此，默认情况下它还会显示两个标签.但是我需要一种配置，例如应该显示一个红色标签，而应该隐藏一个蓝色标签.标签不是该行！

I create a diagram with chart.js. This diagram has two lines. So it displays also two labels by default. But I need a configuration where one for example the red label should appear and the blue one should be hidden. The label not the line!!

感谢您的帮助

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>

推荐答案

您可以使用 legend.onClick 操作即可实现.

You can use legend.labels.generateLabels together with legend.onClick action to achieve this.

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>

这篇关于如何在多行字符中仅显示一个标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！