Chart.js - 造型傳奇

Question

我正在使用 chart.js 制作圖表，並且正在嘗試弄清楚如何更改標簽/圖例樣式。 我想刪除矩形部分，而是使用圓形。 我讀過你可以制作你的自定義圖例（使用legendCallback），但對於我的生活，我不知道該怎么做。 這就是我的圖表現在的樣子 -圖像。

這是我的 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 的新手，所以請盡可能具體地回答你的問題。 非常感謝！

Answer 1

無需使用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>

Answer 2

對於 angular4-chart.js，您可以像這樣使用 options 屬性：

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

Answer 3

第1步：
將選項更改為：

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

第2步：
將此代碼附加到您的畫布（就在畫布之后）：

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

第 3 步：
用這個生成這個圖例而不是默認值（就在 mychart 之后）：

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

第四步：
使 css 生成圓形：

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

第 5 步：
用你覺得應該更好的方式改變 css。
現在是時候吃點chimichangas了。

Answer 4

使用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
        }
    }
}

});

Answer 5

關於@GRUNT 答案的其他信息我在legend.labels 中分配了usePointStyle 而不是@GRUNT 所做的Chart.defaults.global.legend.labels.usePointStyle = true;

這在您使用 react 時很有用

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

更多信息在這里在chart.js中的圖例上顯示點樣式

Answer 6

將此添加到您的選項中

 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',
          },
        },
      },
    });