chart.jsのクラス継承
chartクラスをオリジナルサブクラスに継承してアレンジしたい。
以前質問させて頂きchart.jsがクラスだとわかりました。
これを継承し、サブクラスを作って自分で使い勝手の良いオリジナルクラスを
作りたいと思ったのですが、
うまく継承ができずエラーが発生してしまいます。
何が問題でしょうか？そもそもChartは継承ができないのでしょうか？
（オリジナルのスーパークラスはサブクラスに継承できました）
もし継承ができないのであれば、なぜできないのか理由も併せて回答いただけると幸いです。
発生している問題・エラー
Chart.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Object.acquireContext (Chart.min.js:10:122977)
at edit.construct (Chart.min.js:10:53292)
at new t (Chart.min.js:10:76902)
at new edit (individual_analysis.php:85:9)
at individual_analysis.php:89:11
ソースコード
class edit extends Chart {
constructor(){
super()
}
}
var test= new edit;
var ctx = document.getElementById('myChart');
var myChart = new test(ctx, {
type: "bar",
data:{
labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
datasets:[
{
label:'line1',
type:'line',
data:[6,3,2,2,4,4,3],
backgroundColor: "red",
borderColor : "rgba(254,97,132,0.8)",
fill: 'false',
yAxisID: 'y-axis-2',
},
{
label:'line2',
type:'line',
data:[2,3,4,5,6,7,8],
backgroundColor: "blue",
borderColor : "rgba(254,97,132,0.8)",
fill: false,
yAxisID: 'y-axis-2',
},
{
label:'line3',
type:'line',
data:[5,5,5,5,5,5,5,5,5,5,5,5],
backgroundColor: "red",
borderColor : "red",
fill: false,
yAxisID: 'y-axis-2',
},
{
label:'数値A',
type:'bar',
data:[0,0,1,1,1,1,1,3,2,1,],
backgroundColor: "#00ff7f",
yAxisID: 'y-axis-sales',
},
{
label:'数値B',
type:'bar',
data:[3,3,3,3,3,3,3],
backgroundColor: "#008000",
yAxisID: 'y-axis-sales'
},
{
label:'数値C',
type:'bar',
data:[3,3,3,3,3,3,3],
backgroundColor: "skyblue",
yAxisID: 'y-axis-sales'
},
]
},
options:{
title: { //タイトル設定
display: true, //表示設定
fontSize: 18, //フォントサイズ
text: '月別の数値' //ラベル//
},
legend: {
display: true,
position: 'left',
label:'test',
},
scales:{
xAxes:[{stacked:true,}],
yAxes:[{
id: 'y-axis-sales',//積み上げるY軸
stacked: true,
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
min: 0,
max: 10,
stepSize: 2,
},
},{
id: 'y-axis-2',//積み上げないY軸
stacked: true,
type: 'linear',
display: true,//隠します
position: 'right',
ticks: {
beginAtZero: true,
min: 0,
max: 20,
stepSize: 5,
},
}]
},
}
});
0 likes
