web-dev-qa-db-ja.com

Chart.js-スタイルの凡例

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全般は初めてなので、できるだけ具体的に答えてください。どうもありがとうございます！

javascriptjquerychart.js
13
Retros

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>
18
ɢʀᴜɴᴛ

angular4-chart.jsの場合、次のようなoptions属性を使用できます。

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

ステップ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();

ステップ4：
cssを作成して、円として生成します。

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

ステップ5：
CSSの変更はこれまで以上に良いと思われます。
いくつかのチミチャンガの時間です。

7
Konstantinos