Chart.js - 美化图例

Question

Chart.js - 美化图例

33

我正在使用chart.js制作图表，想知道如何更改标签/图例的样式。我想要删除矩形部分并改用圆形。我看到可以使用legendCallback自定义图例，但是我无论如何都无法弄清楚该怎么做。这是我的图表现在的样子 - image。

这是我的HTML：

<div class="container">
<canvas id="myChart"></canvas>
</div>

这是我的JS代码：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Link One',
            data: [1, 2, 3, 2, 1, 1.5, 1],
            backgroundColor: [
                '#D3E4F3'
            ],
            borderColor: [
                '#D3E4F3',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
          position: 'bottom',
            labels: {
                fontColor: '#333',
            }
        }
}
});

我对JS完全不熟悉，请尽可能详细地回答问题。非常感谢！

- Retros

所有第一个答案都适用于旧版Chart.js。对于新版本的解决方案，请参见https://dev59.com/LVgQ5IYBdhLWcg3wLg85#76164859。 - alex

7个回答

22

对于angular4-chart.js，您可以使用options属性，如下所示：

options = {
      legend:{
        display: true,
        labels: {
          usePointStyle: true,
        }
      }
}

- Orit

12

步骤 1：
将选项更改为：

options: {
    legend: {
        display: false,
    }
}

步骤二：
将以下代码添加到你的画布中（紧接着canvas之后）：

<div id='chartjsLegend' class='chartjsLegend'></div> //Or prepend to show the legend at top, if you append then it will show to bottom.

第三步：
按照以下方式生成此图例（将其放在“mychart”之后）而不使用默认设置：

document.getElementById('chartjsLegend').innerHTML = myChart.generateLegend();

步骤4:
将CSS调整为生成圆形：

.chartjsLegend li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 25px;
}

步骤5：
更改CSS样式的内容，按照您认为应该更好的方式进行。
现在是吃点辣味玉米饼卷的时候了。

- Konstantinos

这太棒了！谢谢你，Konstantinos。 - Retros

这种方式能否使其交互，以便可以切换图表线？ - Zeth

7

使用 usePointStyle:true

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Link One',
        data: [1, 2, 3, 2, 1, 1.5, 1],
        backgroundColor: [
            '#D3E4F3'
        ],
        borderColor: [
            '#D3E4F3',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
    }]
},
options: {
    legend: {
        display: true,
      position: 'bottom',
        labels: {
            fontColor: '#333',
            usePointStyle:true
        }
    }
}

});

- user3094318

4

关于 @GRUNT 回答的补充信息：

我将 usePointStyle 分配给了 legend.labels 而不是像 @GRUNT 那样写成 Chart.defaults.global.legend.labels.usePointStyle = true;

当您使用 React 时，这非常有用。

legend: {
    labels: {
      usePointStyle: true,
    },
  }

更多信息请参见在chart.js中在图例中显示点样式

- Aljohn Yamaro

2

将此添加到您的选项中。

 legend: {
display: true,
          position: 'bottom',
          labels: {
boxWidth: 9, 
            fontColor: '#474747',
            fontFamily: '6px Montserrat',
          },
        },

例如：

举个例子：

 this.testChart = new Chart('testPie', {
      type: 'doughnut',
      data: {
        labels: [ 'Success','Failure','Aborted'],
        datasets: [
          {
            data: [],
            backgroundColor: [ '#45D78F', '#F58220','#FFD403'],
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        cutoutPercentage: 50,    // for thikness of doughnut
        title: {
          display: false,
          text: 'Runs',
          fontSize: 14,
          fontFamily: 'Roboto',
          fontColor: '#474747',
        },
        legend: {
          display: true,
          position: 'bottom',
          labels: {
            boxWidth: 9,
            fontColor: '#474747',
            fontFamily: '6px Montserrat',
          },
        },
      },
    });

- Rahul_Mandhane

1

以上所有答案都适用于旧版的Chart.js。对于新版本，请将图例（顺便提一下标题）定义放入options.plugins {}而不是options {}中。

- alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ɢʀᴜɴᴛ · Accepted Answer

不需要使用 legendCallback 函数。您可以设置 usePointStyle = true 将该矩形变成圆形。

Chart.defaults.global.legend.labels.usePointStyle = true;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Link One',
            data: [1, 2, 3, 2, 1, 1.5, 1],
            backgroundColor: [
                '#D3E4F3'
            ],
            borderColor: [
                '#D3E4F3',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: '#333'
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">
  <canvas id="myChart"></canvas>
</div>