Chart.js 点線表示の方法

本記事では、Chart.jsの点線表示の方法を解説しています。

Chart.jsは、非常に機能も多く、グラフの種類も多い上に、処理速度も高速です。

利用している開発者の方々も多いと思います。

通常のグラフ
点線表示のグラフ
1. パターン１
2. パターン２

通常のグラフ

通常のグラフは、このような感じになるかと思います。

点線表示のグラフ

パターン１

Chart.jsの線グラフでは、プロパティーに設定することで、点線を表示させることができます。

点線に設定する箇所は、下記の部分になります。

borderDash: [5, 5],

1	borderDash: [5, 5],

全体のソースは、下記のような感じになります。

    var ctx = document.getElementById('myBarChart');
    ctx.height = 50;

    var myBarChart = new Chart(ctx, {

    type: 'bar',
    data: {
      labels: [
            '21年春期',
            '21年秋期',
            '22年春期',
            '22年秋期',
            '23年特別',
            '23年秋期',
            '24年春期',
            '24年秋期',
            '25年春期',
            '25年秋期',
            '26年春期',
            '26年秋期',
            '27年春期',
            '27年秋期',
            '28年春期',
            '28年秋期',
            '29年春期',
            '29年秋期',
            '30年春期',
            '30年秋期',
            '31年春期',
            'R1年秋期',
            'R2年秋期',
        ],
        },{
            label: '合格率',
            type: 'line',
            data: [
                26.1,
                21.4,
                20.3,
                22.9,
                20.6,
                23.6,
                22.7,
                20.5,
                19.2,
                18.5,
                20.1,
                20.2,
                19,
                23.4,
                20.5,
                21.4,
                20.2,
                21.8,
                22.7,
                23.4,
                21.5,
                23.5,
                23.5,
            ],
            borderDash: [5, 5],
            borderColor: "#ffb6c1",
            backgroundColor: "rgba(0,0,0,0)",
            yAxisID: 'right-y-axis'
        },
      ]
    },
    options: {
        title: {
          display: false,
        },
        scales: {
            yAxes: [{
              ticks: {
                suggestedMax: 0,
                suggestedMin: 0,
                stepSize: 1000000,
                callback: function(value, index, values){
                    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 人'
                }
              }
            },{
                id: 'right-y-axis',
                position: 'right',
                ticks: {
                  suggestedMin: 0,
                  stacked: true,
                  callback: function(value, index, values){
                      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' %'
                  }
                }
            }],
          },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data){
                  if ( tooltipItem.datasetIndex == 3 ) {
                      return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' %';
                  } else {
                      return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 人';
                  }
                }
            }
        },
      legend: {
        display: true,
      },
    }
  });

100

101

102

103

104

105

106

107

108

109

var ctx = document.getElementById('myBarChart');

ctx.height = 50;

var myBarChart = new Chart(ctx, {

type: 'bar',

data: {

labels: [

'21年春期',

'21年秋期',

'22年春期',

'22年秋期',

'23年特別',

'23年秋期',

'24年春期',

'24年秋期',

'25年春期',

'25年秋期',

'26年春期',

'26年秋期',

'27年春期',

'27年秋期',

'28年春期',

'28年秋期',

'29年春期',

'29年秋期',

'30年春期',

'30年秋期',

'31年春期',

'R1年秋期',

'R2年秋期',

},{

label: '合格率',

type: 'line',

data: [

26.1,

21.4,

20.3,

22.9,

20.6,

23.6,

22.7,

20.5,

19.2,

18.5,

20.1,

20.2,

19,

23.4,

20.5,

21.4,

20.2,

21.8,

22.7,

23.4,

21.5,

23.5,

borderDash: [5, 5],

borderColor: "#ffb6c1",

backgroundColor: "rgba(0,0,0,0)",

yAxisID: 'right-y-axis'

]

options: {

title: {

display: false,

scales: {

yAxes: [{

ticks: {

suggestedMax: 0,

suggestedMin: 0,

stepSize: 1000000,

callback: function(value, index, values){

return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 人'

}

},{

id: 'right-y-axis',

position: 'right',

ticks: {

suggestedMin: 0,

stacked: true,

callback: function(value, index, values){

return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' %'

}

}],

tooltips: {

callbacks: {

label: function(tooltipItem, data){

if ( tooltipItem.datasetIndex == 3 ) {

return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' %';

} else {

return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 人';

}

legend: {

display: true,

}

});

パターン２

配列の最初の数字で実線の長さ、次の数字で線と線の幅の長さを設定します。

borderDash: [10, 5],

1	borderDash: [10, 5],