如何使legend.display作为图表JS中的特定数据集为false

发布于 2025-02-12 03:33:35 字数 1673 浏览 0 评论 0原文

 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:[" "," "," "," "," "]
      }
    }
  }
});

我不想显示条形图标签，即“录音”，但是对于线路图，我想显示标签，即

我尝试使用的 “总录音” 选项：{ 传奇：{ 显示：false } }

但这同时使条形图和线路图标签消失了

原文

 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:[" "," "," "," "," "]
      }
    }
  }
});

I don't want to display bar chart label i.e. "Recordings" but for the line chart I want to display the label i.e. 'Total Recordings'

I tried using
options:{
legend:{
display:false
}
}

but that makes both bar chart and line chart label disappear

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末染殇 2025-02-19 03:33:35

您可以使用过滤器回调来过滤出您不想显示的传奇项目：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (l) => (l.text !== '# of Points')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>

You can use the filter callback to filter out the legend items you dont want to show:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (l) => (l.text !== '# of Points')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>

回复收藏 0 原文

~没有更多了~