1

我正在尝试使用谷歌甜甜圈图为 SAP BusinessObjects Design Studio 开发自定义甜甜圈组件。这就像 DOM（文档对象模型）。

由于与其他组件的兼容性，我想让圆环图响应。为此，在经典 DOM 中，我使用 bootstrap "col-md-6" div 作为容器：

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2000', 1000, 400],
    ['2001', 1170, 460],
    ['2002', 660, 1120],
    ['2003', 1030, 540],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540],
    ['2008', 1000, 400],
    ['2009', 1170, 460],
    ['2010', 660, 1120],
    ['2011', 1030, 540]
  ]);
  var options = {
    backgroundColor: {
      fill: 'none'
    },
    pieHole: 0.4,
    pieSliceTextStyle: {
      color: 'white',
    },
    title: 'Company Performance',
    chartArea: {
      top: 20,
      width: "100%",
      height: "100%"
    },
    legend: {
      position: 'labeled',
      textStyle: {
        fontSize: 15,
        color: '#000'
      }
    },
    titlePosition: 'out',
    titleTextStyle: {
      color: '#000',
      bold: true,
      italic: true,
      fontSize: 16,
      position: 'centered'
    }
  };

  var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
  chart.draw(data, options);
}
google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart2);

function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2000', 1000, 400],
    ['2001', 1170, 460],
    ['2002', 660, 1120],
    ['2003', 1030, 540],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540],
    ['2008', 1000, 400],
    ['2009', 1170, 460],
    ['2010', 660, 1120],
    ['2011', 1030, 540]
  ]);
  var options = {
    backgroundColor: {
      fill: 'none'
    },
    pieHole: 0.4,
    pieSliceTextStyle: {
      color: 'white',
    },
    title: 'Company Performance',
    chartArea: {
      top: 20,
      width: "100%",
      height: "100%"
    },
    legend: {
      position: 'labeled',
      textStyle: {
        fontSize: 15,
        color: '#000'
      }
    },
    titlePosition: 'out',
    titleTextStyle: {
      color: '#000',
      bold: true,
      italic: true,
      fontSize: 16,
      position: 'centered'
    }
  };

  var chart = new google.visualization.PieChart(document.getElementById('chartDiv2'));
  chart.draw(data, options);
}


$(window).resize(function() {
  drawChart();
  drawChart2();
});
.chart {
  width: 100%;
  min-height: 450px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div class="clearfix"></div>
  <div class="col-md-6">
    <div id="chartDiv" class="chart"></div>
  </div>
  <div class="col-md-6">
    <div id="chartDiv2" class="chart"></div>
  </div>
</body>

</html>

但是在设计工作室中，我们需要在 Grid Layout Cell 中使用这个组件。由于这个包装新的 div，我的设计在设计工作室方面被打破了。您在图片中看到的另一个 div，来自设计工作室 sdk 开发人员模式。但我可以用 js 访问它们。只知道要编辑哪个 div。我的 html 设计和组件设计的 div 层次结构的两张照片：

正常的 dom 设计

设计工作室

这是我正在与设计工作室合作的片段，但您无法运行它。me.init() 方法像 main 方法一样工作。

sap.designstudio.sdk.Component.subclass("com.try.donut.Donut", function() {

	var me = this;
	var myDiv;
	me._width;
	me._height;

	me.drawChart = function() {
		//me.$().width();
		
		var data = google.visualization.arrayToDataTable([
				[ 'Year', 'Sales', 'Expenses' ], [ '2000', 1000, 400 ],
				[ '2001', 1170, 460 ], [ '2002', 660, 1120 ],
				[ '2003', 1030, 540 ], [ '2004', 1000, 400 ],
				[ '2005', 1170, 460 ] ]);
		var options = {
			backgroundColor : {
				fill : 'none'
			},
			pieHole : 0.4,
			pieSliceTextStyle : {
				color : 'white',
			},
			title : 'Company Performance',
			chartArea : {
				top: "30",
				bottom: "30",
				height: "100%",
				width: "100%"
			},
			legend : {
				position : 'labeled',
				textStyle : {
					color : '#000'
				}
			},
			titlePosition : 'out',
			titleTextStyle : {
				color : '#000',
				bold : true,
				italic : true,
				fontSize : 16,
				position : 'centered'
			}
		};

		var chart = new google.visualization.PieChart(document.getElementById(myDiv.id+'_chart_div'));
		chart.draw(data, options);
	};

	me.redraw = function() {
		myDiv = this.$()[0];
		
		var componentDiv = d3.select(myDiv);
		componentDiv.selectAll("*").remove();
		
		var wrapperDiv = componentDiv.append("div").attr("class","col-md-6");
		wrapperDiv.append("div").attr("class","chart").attr("id",myDiv.id+"_chart_div");
		
		google.charts.load('current', {'packages':['corechart']});
    	google.charts.setOnLoadCallback(function(){ 
    		me.drawChart();	
    	});
	};
	$(window).resize(function(){
		  me.redraw();
	});
	me.init = function() {
		me.redraw();
	};

	// /////***** SET - GET *****\\\\\\
	me.height = function(value) {
		if (value === undefined) {
			return me._height;
		} else {
			me._height = value;
			return me;
		}
	};

	me.width = function(value) {
		if (value === undefined) {
			return me._width;
		} else {
			me._width = value;
			return me;
		}
	};
});

我应该对新 div 的属性做些什么来解决这个问题？

4

0 回答 0