У меня есть требование, по которому я должен создать виджет диаграммы с использованием Shadow DOM и charts. js library. Я могу создать диаграмму, используя html, CSS и javascript, но когда я пытаюсь сделать это с помощью shadowDOM, это не работает для меня.
Я предоставил код, который я написал, используя css, html, javacript и использование диаграмм. js библиотека в первой части.
Во второй части я предоставил код, созданный с помощью shadowDOM.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>My Chart</title>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart=document.getElementById('myChart').getContext('2d');
let typeofchart='horizontalBar'
//Global Options
Chart.defaults.global.defaultFontFamily='Lato';
Chart.defaults.global.defaultFontSize=18;
Chart.defaults.global.defaultFontColor='Lato';
let massPopChart=new Chart(myChart,{
type:typeofchart,//bar,horizontalBar,pie,line,doughnut,radar,polarArea
data:{
labels:['Boston','Worcester','Springfield','Lowell','Cambridge','New Bedford'],
datasets:[{
label:'Population',
data:[
617594,
181045,
153060,
106519,
105162,
95072
],
//backgroundColor:'green'
backgroundColor:[
'rgba(255,99,132,0.6)',
'rgba(54,162,235,0.6)',
'rgba(255,206,86,0.6)',
'rgba(75,192,192,0.6)',
'rgba(153,102,255,0.6)',
'rgba(255,159,64,0.6)',
'rgba(255,99,132,0.6)'
],
borderWidth:1,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}]
},
options:{
title:{
display:true,
text:'Largest Cities In Massachusetts',
fontSize:25
},
legend:{
display:true,
position:'right',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
}
}
});
</script>
</head>
<body>
</body>
</html>
Соответствующий код, который я написал для создания той же диаграммы с использованием ShadowDOM, не работает.
(function() {
let tmpl = document.createElement('template');
tmpl.innerHTML = `
<div class="container">
<canvas id="myChart"></canvas>
</div>
`;
customElements.define('com-sap-sample-helloworld1', class HelloWorld1 extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({mode: "open"});
this._shadowRoot.appendChild(tmpl.content.cloneNode(true));
this._firstConnection = false;
}
//Fired when the widget is added to the html DOM of the page
connectedCallback(){
this._firstConnection = true;
this.redraw();
}
//Fired when the widget is removed from the html DOM of the page (e.g. by hide)
disconnectedCallback(){
}
//When the custom widget is updated, the Custom Widget SDK framework executes this function first
onCustomWidgetBeforeUpdate(oChangedProperties) {
}
//When the custom widget is updated, the Custom Widget SDK framework executes this function after the update
onCustomWidgetAfterUpdate(oChangedProperties) {
if (this._firstConnection){
this.redraw();
}
}
//When the custom widget is removed from the canvas or the analytic application is closed
onCustomWidgetDestroy(){
}
//When the custom widget is resized on the canvas, the Custom Widget SDK framework executes the following JavaScript function call on the custom widget
// Commented out by default. If it is enabled, SAP Analytics Cloud will track DOM size changes and call this callback as needed
// If you don't need to react to resizes, you can save CPU by leaving it uncommented.
/*
onCustomWidgetResize(width, height){
redraw()
}
*/
redraw()
{
let chartsjssrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js";
let href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
let script = document.createElement('script');
script.setAttribute('src', chartsjssrc)
let stylesheet = document.createElement('link')
stylesheet.setAttribute('rel', 'stylesheet')
stylesheet.setAttribute('href', href)
let myChart=this._shadowRoot.getElementById('myChart').getContext('2d');
let typeofchart='horizontalBar'
//Global Options
Chart.defaults.global.defaultFontFamily='Lato';
Chart.defaults.global.defaultFontSize=18;
Chart.defaults.global.defaultFontColor='Lato';
let massPopChart=new Chart(myChart,{
type:typeofchart,//bar,horizontalBar,pie,line,doughnut,radar,polarArea
data:{
labels:['Boston','Worcester','Springfield','Lowell','Cambridge','New Bedford'],
datasets:[{
label:'Population',
data:[
617594,
181045,
153060,
106519,
105162,
95072
],
//backgroundColor:'green'
backgroundColor:[
'rgba(255,99,132,0.6)',
'rgba(54,162,235,0.6)',
'rgba(255,206,86,0.6)',
'rgba(75,192,192,0.6)',
'rgba(153,102,255,0.6)',
'rgba(255,159,64,0.6)',
'rgba(255,99,132,0.6)'
],
borderWidth:1,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}]
},
options:{
title:{
display:true,
text:'Largest Cities In Massachusetts',
fontSize:25
},
legend:{
display:true,
position:'right',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
}
}
});
}
});
})();
Please tell what is wrong