使用Google图表javascript库在XSL-FO转换期间创建插图

时间:2017-08-12 17:58:32

标签: javascript xslt msxml google-chartwrapper

我想在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代码吗?

0 个答案:

没有答案