You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2019/11/20 01:21:05 UTC
[GitHub] [incubator-echarts] endypark opened a new issue #11680: export the
echarts to svg with htmlunit or phantomjs, wrong .
endypark opened a new issue #11680: export the echarts to svg with htmlunit or phantomjs, wrong <path>.
URL: https://github.com/apache/incubator-echarts/issues/11680
### **Version**
4.5.0
### **Steps to reproduce**
htmlunit-2.36.0.jar
export the echarts to svg， should be <path d="M 68 340 L 132 340 L 132 305 L 68 305 L 68 340 Z"
， but actual is <path d="M 68 340 L 132 340 L 132 340 L 68 340 L 68 340 Z" 。
the previous is generate by chrome or firefox, it is a histogram. but htmlunit generated a non-histogram svg.
<title>ECharts</title> <script src="js/echarts.js"></script>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'}); var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [7, 20, 36, 10, 10, 20] }] }; myChart.setOption(option); </script>
public String renderHtml(String path, String subDomName) {
try (WebClient webClient = new WebClient();) {
try {
URL url = this.getClass().getClassLoader().getResource(path);
URI uri = url.toURI();
String links = FileUtil.getContentFromFile(new File(url.getPath()));
HtmlPage page = webClient.getPage(uri.toString());
webClient.waitForBackgroundJavaScript(30000);
return page == null ? null : page.getElementById(subDomName).asXml();
} catch (FailingHttpStatusCodeException | IOException | URISyntaxException e) {
return null;
}
} catch (Exception e) {
return null;
}
}
var system = require('system');
var page = require('webpage').create();
// 如果是windows,设置编码为gbk，防止中文乱码,Linux本身是UTF-8
var osName = system.os.name;
if ('windows' === osName.toLowerCase()) {
phantom.outputEncoding="gbk";
}
// 获取第二个参数(即请求地址url).
//var url = system.args[1];
// 显示控制台日志.
page.onConsoleMessage = function(msg) {
console.log('[' + msg + ']');
};
//打开给定url的页面.
page.open("echarts.html", function(status) {
if (status == 'success') {
//console.log('echarts页面加载完成,加载耗时:' + (new Date().getTime() - start) + ' ms');
// 由于echarts动画效果，延迟500毫秒确保图片渲染完毕再调用下载图片方法.
page.render('example.png');
console.log("页面加载成功!");
} else {
console.log("页面加载失败 Page failed to load!");
}
// 10秒后再关闭浏览器.
setTimeout(function() {
phantom.exit();
}, 10000);
});
### **What is expected?**
I want to generate the image like this on Server side:
### **What is actually happening?**
Now, the generated-image on Server side by htmlunit or phantomjs as below:
the Y is always 340, so no histogram showed.
path d="M 68 340 L 132 340 L 132 340 L 68 340 L 68 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none">
path d="M 148 340 L 212 340 L 212 340 L 148 340 L 148 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none"
path d="M 228 340 L 292 340 L 292 340 L 228 340 L 228 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none"
path d="M 308 340 L 372 340 L 372 340 L 308 340 L 308 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none"
path d="M 388 340 L 452 340 L 452 340 L 388 340 L 388 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none"
path d="M 468 340 L 532 340 L 532 340 L 468 340 L 468 340 Z" fill="#c23531" fill-opacity="undefined" stroke="none" clip-path="none"
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org