ChartJS 如何在chart js中将特定数据集的legend.display设置为false

huwehgph  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(176)
var myBarChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ["Single Drive Mode", "Dual Drive Mode"],
    datasets: [
      {
        type: 'bar',
        label: "Recordings",
        backgroundColor: ["rgba(2,117,216,0.2)","rgba(75, 192, 192, 0.2)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        borderColor: ["rgba(2,117,216,1)","rgba(75, 192, 192, 1)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        data: [this.data.singledrivemode,this.data.dualdrivemode],
        order: 2,
        borderWidth: 2,
        barPercentage:0.4
      },
      {
        type: 'line',
        data: [this.data.totalrecordings, this.data.totalrecordings],
        label: 'Total Recordings',
        backgroundColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
        borderColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
        pointRadius: 3,
        pointHoverRadius: 4,
        order: 1,
        xAxisID: 'xAxis2'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label),
        }
      }
    },
    scales: {
      xAxis: {
        ticks: {
          maxTicksLimit: 6
        }
      },
      yAxis: {
        ticks: {
          maxTicksLimit: 5
        }
      },
      xAxis2: {
        display: false,
        offset: false,
        ticks: {
          display: false

        },
        // labels:[" "," "," "," "," "]
      }
    }
  }
});

我不想显示条形图标签,即“记录”,但对于折线图,我想显示标签,即“总记录”
我尝试使用选项:{ legend:{ display:false } }
但这会使条形图和折线图标签都消失

r7xajy2e

r7xajy2e1#

您可以使用过滤器回调来过滤掉不想显示的图例项:
第一个

相关问题