我想在XSL-FO转换过程中使用Google图表javascript库来创建插图。我找到了一些使用现已弃用的Google静态图片图表API的示例,以使用$(e).find("game-card-name")
显示图表。由于文档说图表显示在SVG中,我想知道是否可以使用MSXML处理器的元素对javascript库执行相同的操作。
我使用以下示例编写了一个测试样式表:
console.log("Roblox Bookmark Loaded");
$(document).on("DOMNodeInserted", function(e) {
if ($(e.target).hasClass("game-card")) {
console.log(e);
}
});
在我的样式表中,我首先在<fo:instream-foreign-object>
命名空间中定义<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
函数:
drawChart()
然后我在gchart
内调用<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:gchart="https://developers.google.com/chart/" exclude-result-prefixes="xs" version="2.0">
<msxsl:script language="JScript" implements-prefix="gchart">
import https://www.gstatic.com/charts/loader.js;
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</msxsl:script>
,希望它会返回SVG代码。
gchart:drawChart()
问题是Microsoft JScript没有加载库:遇到<fo:instream-foreign-object>
时会发出错误。我该怎么办?
此外,你认为draw()函数会返回SVG代码吗?