ChartJS 显示图例

Posted

技术标签:

【中文标题】ChartJS 显示图例【英文标题】:ChartJS display legend 【发布时间】:2017-08-03 08:50:36 【问题描述】:

我是 ChartJS 的新手,我对图例有一些问题。我有一个简单的条形图,只有 3 个条形,例如:

<div class="x_panel">
    <div class="x_title">
        <h2>Bar graph</h2>
        <ul class="nav navbar-right panel_toolbox" style="padding-left:5%">
            <li>
                <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li>
                <a class="close-link"><i class="fa fa-close"></i></a>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <canvas id="mybarChart"></canvas>
    </div>
</div>

我正在尝试在图表下方显示图例,如附图中的

 var mybarChart = new Chart(ctx, 
        type: 'bar',
        data: 
            labels: [],
            datasets: [
                label: '# of Votes',
                backgroundColor: "#000080",
                data: [80]
            , 
                label: '# of Votes2',
                backgroundColor: "#d3d3d3",
                data: [90]
            ,
            
                label: '# of Votes3',
                backgroundColor: "#add8e6",
                data: [45]
            ]
        ,

        options: 
            legend: 
                display: true,
                labels: 
                    fontColor: "#000080",
                
            ,
            scales: 
                yAxes: [
                    ticks: 
                        beginAtZero: true
                    
                ]
            
        
    );

但我显示的图表是空的:( 我还尝试通过在画布下方添加另一个 div 并通过以下方式调用它来显示图例:

document.getElementById('barlegend').innerhtml = mybarChart.generateLegend();

结果相同:(

我做错了什么?

【问题讨论】:

【参考方案1】:

使用最新版本的chart.js(3.6.0),可以通过以下代码控制图例显示:

  const options = 
    plugins: 
    ...
      legend: 
        position: "right", // by default it's top
      ,
    ...
    ,
  ;

我知道这已经在这里很久了,但可能会帮助将来遇到与我相同问题的人。

【讨论】:

【参考方案2】:

根据您在问题中提供的代码,您似乎忘记在图表数据对象中添加 labels 数据。如果没有这些信息,chartjs 将无法生成您的轴并将每个数据集数据映射到它。

此外,由于您提到希望图例位于图表下方,因此我添加了 display: bottom 选项。这是工作代码。

var ctx = document.getElementById("mybarChart").getContext("2d");

var mybarChart = new Chart(ctx, 
  type: 'bar',
  data: 
    labels: ['Votes'],
    datasets: [
      label: '# of Votes',
      backgroundColor: "#000080",
      data: [80]
    , 
      label: '# of Votes2',
      backgroundColor: "#d3d3d3",
      data: [90]
    , 
      label: '# of Votes3',
      backgroundColor: "#add8e6",
      data: [45]
    ]
  ,

  options: 
    legend: 
      display: true,
      position: 'bottom',
      labels: 
        fontColor: "#000080",
      
    ,
    scales: 
      yAxes: [
        ticks: 
          beginAtZero: true
        
      ]
    
  
);

这也是一个有效的codepen example。

【讨论】:

以上是关于ChartJS 显示图例的主要内容,如果未能解决你的问题,请参考以下文章

Chartjs:更新数据后常见的可点击图例不起作用

如何使用 Chartjs 对图例条目进行分组?

ChartJS 版本 3 - 多个折线图的常用图例

Chartjs - 将图例更改为带有圆点样式的线?

有没有办法隐藏/自定义 ChartJS 上面的图例?

如何修复 ChartJS 图例不起作用的问题