chart.jsのtypeプロパティの変え方
chart.jsのtypeプロパティがかえられません
グラフの形式（バブルチャート、線グラフ、棒グラフなど）を選ぶ設定としてtypeというプロパティが用意されています。
インスタンス化した後に、グラフのタイプを変えたいと思い、myChart.type="line";という風にコーディングを追加したのですが変化はありませんでした。しかしその他のmyChart.datasets[0].data[0]=1などでdatasetsは変更できました。またmyChart.datasets[0].type="line"としても変更できました。
もしかしてmyChart.typeはprivate?など設定してあり変更できないようにしてあるのでしょうか？
また別の質問ですが、インスタンス化した後にプロパティの数値を変えても
グラフ表示に変化はなく、myChart.update();によって
表示の更新ができました。
変数・配列などはわざわざこのような操作をしなくてもよいと思うのですが、なぜインスタンスはこのような操作が必要なのでしょうか？また他の言語でもこのようにインスタンスを変える場合は2step必要なのでしょうか？
すみませんがご教授頂けますと幸いです。
質問をまとめますと
①typeプロパティはなぜ変更できないのか？
②インスタンスの更新はなぜ2stepなのか？
③他の言語でも同じ仕様なのか？php・pythonなど
すみませんがご教授いただけますとありがたいです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<title>個別分析画面</title>
</head>
<body>
<div>
<a href="./top.php">TOP画面に戻る</a>
</div>
<div>
<a href="./time_summary.php"><button>労働時間サマリー</button></a>
</div>
<div>
<a href="./task_summary.php"><button>個別課題一覧</button></a>
</div>
<div>
<a href="./overtime_summary.php"><button>残業時間サマリー</button></a>
</div>
<div>
<a href="./filter.php"><button>比較画面</button></a>
</div>
<div>
<div>
<input type="radio" id="year" name="term" value='year' onclick="btnClick(this)" checked>
<label for="year">年別</label>
</div>
<div>
<input type="radio" id="month" name="term" value='month'>
<label for="month">月別</label>
</div>
<div>
<input type="radio" id="day" name="term" value='day'>
<label for="day">日別</label>
</div>
<div>
<canvas id="myChart" height="100"></canvas>
</div>
</div>
<div>
<input type="radio" id="plus" name="feeling" value='plus' checked>
<span>プラス感情</span>
</div>
<div>
<input type="radio" id="minus" name="feeling" value='minus'>
<span>マイナス感情</span>
</div>
<script>
class edit extends Chart {}
edit.prototype.test3 = function(){
console.log("test")
}
var ctx = document.getElementById('myChart');
var myChart = new edit(ctx, {
type: "bar",
data:{
labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
datasets:[
{
label:'line1',
type:'line',
data:[1,1,1,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,
},
}]
},
}
});
myChart.data.labels[4]=4;//変更可能
myChart.data.datasets[0].type="bar";//変更可能
myChart.data.datasets[0].yAxisID='y-axis-sales';//変更可能
myChart.type="line";//変更不可能
myChart.update();
</script>
</body>
</html>
0
