VBA HTML

#ID{
background-Color:white;
margin:-10px;
padding:10px 10px 10px 10px;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.2);
}

#ID{
background-Color:transparent;
text-align:center;
width:90%;
padding:10px 10px 10px 50px;

}


//オプションoptions、scale、ticks

var variation1=['#6d7eca', '#05d489', '#e03122', '#93e8ec', '#e0b3cd', '#e0e4b6', '#5592ad'];
var variation2=['#99a1c6', '#51cda0', '#df7970', '#4c9ca0', '#ae7d99', '#c9d45c', '#5592ad'];

var variation3='#6d7eca';
var variation4='#99a1c6';

var variation5=['#6d7eca', '#05d489', '#e03122', '#93e8ec'];
var variation6=['#99a1c6', '#51cda0', '#df7970', '#4c9ca0'];

//var newdata=[6,7, 1, 3, 1, 1];
var newdata=6
function addData(chart, label, data) {
//alert(1)
chart.data.label.push(label);
chart.data.type.push('bar');
chart.data.push(data);

chart.update();
};

//************************************************************************************************
// line-bar-bar
//************************************************************************************************
function top_linebar(){
var [a,b,c,d,e,f,g]=AAA[1][0]
var ctx1 = document.getElementById('myChart').getContext('2d');
var myChart1 = new Chart(ctx1,{
type: 'bar',
data: {
labels: [c,d,e,f,g],
datasets: [{
type: 'line',
label: 'C',
data: [0.3, 0.5, 0.2, 0.3],
backgroundColor: "rgba(0,0,0,0.0)",
borderColor: '#99a1c6',
borderWidth: 1,
yAxisID: 'right'
}, {
type: 'bar',
label: 'B',
data: [6,7, 1, 3, 1, 1],
backgroundColor:variation5,
yAxisID: 'left'
}, {
type: 'bar',
label: 'A',

data: [12, 19, 3, 5, 2, 3],
backgroundColor:variation6,
yAxisID: 'left'
}, ]
},
options: {
title: {
display: true,
text: 'Chart.js Bar Chart',
fontSize: 20
},
legend: {
position: 'right'
},
animation: {
duration: 2000,
// easing: 'easeInElastic'
easing: 'easeOutBounce',
//onComplete :function() {alert(9)}
},
scales: {

xAxes: [{
stacked: true ,
gridLines: {
display: false
},
}],
yAxes: [{
id: 'left',
position: "left",
ticks: {stepSize: 5,min: 0,max:30},
},
{
id: 'right',
position: "right",
ticks: {stepSize: 5,min: 0,}
}
]
}

}

});
};
//************************************************************************************************
// doughnutChart
//************************************************************************************************



function doughnutChart() {
var ctx = document.getElementById("ID_doughnut").getContext('2d');
var myChart = new Chart(ctx, {
type: "doughnut", // グラフの種類 pie, doughnut polarArea
data: {
labels: ["Cantact Ratio", "1"], // 軸のラベル
datasets: [
{
label: "1",
data: [29, 21], // Data
backgroundColor:['#c9d45c','transparent'], // 円の色

}
]
},
options: {
animation:{easing:'easeOutBounce',
duration: 5000},
legend: {
display: false,
},
responsive: false,
cutoutPercentage: 80, // 中央空白サイズ%
title: { // 図のタイトル表示
display: false,
},

}
});
}