Question

我的Highchart在Chrome中正常显示，但是当我尝试在Internet Explorer中打开它时，只显示标题和CSS边框。我的主要问题是，当我试图在java应用程序的jEditorPane中显示它时，它不会出现;它只显示边框。我可以在jEditorPane中显示简单的HTML页面，但我猜这与javascript / jquery有关吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Chart Title</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="http://code.highcharts.com/highcharts.js"></script>
            <script src="http://code.highcharts.com/modules/exporting.js"></script>
            <link href='http://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
            <script type="text/javascript">
                $(function () {
                Highcharts.setOptions({
                    colors: ['#1a1334','#26294a','#01545a','#017351','#03c383','#aad962','#fbbf45','#ef6a32','#ed0345','#a12a5e','#710162','#110141']
                });
                    var chart;
                    $(document).ready(function () {
                        $('#container').highcharts({
                            chart: {
                                type: 'pie',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                backgroundColor: '#f5f5f5'
                            },
                            title: {
                                text: 'Chart Title',
                                style: {
                                    fontSize: '35px',
                                    fontWeight: 'bold',
                                    fontFamily: 'Oswald'
                                }
                            },
            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.y}</b>: {point.percentage:.1f} %',
                                        style: {
                                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                                            fontSize: '15px'
                                        }
                                    },
                                    showInLegend: true
                                }
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'top',
                                y: 75,
                                backgroundColor: '#e4e4e4',
                                borderRadius: '5px',
                                itemStyle: {
                                    fontSize: '15px',
                                    fontWeight: 'light'
                                }
                            },
                            credits: {
                                enabled: false
                            },
                            series: [{
                                name: 'Chart Title',
                                innerSize: '40%',
                                data: [ 
                                ['Work',11],
                                ['Eat',2],
                                ['Commute',2],
                                ['Watch TV',2],
                                ['Sleep',7],
                                ['Other', 30],
                                ['New', 45],
                                ['Extra', 56], ]
                            }]
                        });
                    });
                });
            </script>
        </head>
        <body>
            <div id="container" style="width: 945px; height: 525px; border-color: #333; border-style: solid; border-width: 10px 5px 5px 10px;"></div>
        </body>
    </html>

jEditorPane代码：

jEditorPane1.setEditable(false);
try {
    jEditorPane1.setPage(getClass().getResource("html/pie.html"));
} catch (IOException e) {
    System.out.println(e);
}

Highcharts的大多数解决方案都没有显示脚本的顺序，但我很确定这不是我的问题。

有什么想法吗？

Answer 1

尝试使用JavaFX中的WebView。

http://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm

IIRC它基于Webkit，应该能够正确呈现高级图表

Highcharts未显示在jEditorPane中

1 个答案: