javascriptのfor of文をIE11用に
前に質問した、「chart.jsの多重円グラフで系列表示について」から得た回答から派生した問題についてです。htmlでのボタン処理を行う方法をfilemakerのwebビューアで使おうとしたところの表示ブラザーがwindows版ではレンダリングエンジンがIE11相当らしいのでfor of構文の部分が引っかかりグラフが表示できませんでした。そこでbabelの使用を教えられ、babelで書き換え処理を施した後ブラウザーで表示させたところ普通に動作しましたが、webビューアに適用したところ表示まではできたのですがボタン動作は無反応です。それなら反復処理を他の方法でもと思いましたが、私のjavascriptの生かじりの知識では太刀打ちできないので、教えてもらった下記コードをIE11にも適用できるようご教授おねがいいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>円グラフ</title>
</head>
<body>
<canvas id="myPieChart" width="550" height="480"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>
<div class="button">
<button class="toggleDataset" data-id="0">仙台</button>
<button class="toggleDataset" data-id="1">札幌</button>
<button class="toggleDataset" data-id="2">渋谷</button>
</div>
<style>
.button {
left: 200px;
position:relative;
}
</style>
<script>
var datasets = [
{ label: '仙台', data: [320000, 590000, 400000, 420000, 380000, 250000, 420000], },
{ label: '札幌', data: [520000, 450000, 380000, 280000, 590000, 400000, 530000], },
{ label: '渋谷', data: [650000, 230000, 480000, 600000, 620000, 700000, 760000], },
];
var visibility = [1, 1, 1]; // 各データの表示状態フラグ 1: 表示、0: 非表示
var ctx = document.getElementById('myPieChart');
var config = {
type: 'pie',
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: datasets
},
options: {
responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定
title: {
display: true,
text: ''
},
legend: { // 凡例
display: true, // 表示の有無
position: 'top' // 表示位置
}
},
plugins: {
colorschemes: {
scheme: 'office.Red6' //現状ではデフォルトでしか機能しない
}
}
};
window.myPieChart = new Chart(ctx, config);
var buttons = document.getElementsByClassName('toggleDataset');
for(button of buttons){
button.addEventListener('click', function(e){
// クリックされたボタンに応じてデータの表示切り替え
var dataId = e.target.getAttribute('data-id');
if(visibility[dataId] == 1){
// 非表示
config.data.datasets = config.data.datasets.filter(
data => data != datasets[dataId]
);
e.target.style = 'text-decoration: line-through;';
}else{
// 表示
config.data.datasets.push(datasets[dataId]);
e.target.style = '';
}
// 表示状態フラグとグラフの更新
visibility[dataId] = 1 - visibility[dataId];
window.myPieChart.update();
});
}
</script>
</body>
</html>
お礼
ありがとうございます。 逆にktermで出力された内容をgeditとかのエディタに 貼り付けしたいのですがコピーの場合にはどのキーを押せばいいのでしょうか?
補足
ご回答誠に有難うございます。ｍ(＿ ＿)ｍ > Shift押しながらInsertで貼り付けできたりしません か？ 一応できましたが、、、