Question

我正在尝试创建一个聚合物自定义元素来显示Highchart并收到此错误：

'Highcharts Error＃13渲染div未找到

如果chart.renderTo选项配置错误，Highcharts无法找到用于呈现图表的HTML元素，则会发生此错误。'

任何人都可以解释如何将图表加载到模板div id =“container”中吗？任何与工作高级图表/聚合物元素的链接都非常赞赏：）

我的代码（我正在使用聚合物启动器套件，因此链接到elements.html中的聚合物/ web组件并且在index.html中）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
        is: "my-chart",
        ready: new Highcharts.Chart({
            chart: {
                type: 'bar',
                renderTo: 'container'
            },
            title: {text:  'HI'},
            xAxis: {
                categories: ['London', 'Paris', 'Madrid']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
            }]
        })
    });
    </script>
</dom-module>

新代码：

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
        is: "my-chart",
        ready: function() {

            var el = new Highcharts.Chart

        ({
            chart: {
                type: 'bar',
                // renderTo: 'container'
            },
            title: {text:  'HI'},
            xAxis: {
                categories: ['London', 'Paris', 'Madrid']
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },
            series: [{
                name: 'Cities',
                data: [1000, 2500, 1500]
            }]
        })
            this.$.container.appendChild(el);
       }
     });
    </script>
</dom-module>

Answer 1

尝试使用

ready: function() {
    var el = new Highcharts.Chart({.....});
    //selector for element with id container
    this.$.container.appendChild(el);
}

Answer 2

我得到了这样的图表加载，感谢您的帮助：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <dom-module id="bar-chart">
        <template>
            <div id="container" style="max-width: 600px; height: 360px;"></div>
        </template>

        <script>
            Polymer({
            is: "bar-chart",
            ready: function () {


                $(this.$.container).highcharts({
                chart: {
                    type: 'bar',
                    renderTo: 'container'
                },
                title: {text:  'HI'},
                xAxis: {
                    categories: ['London', 'Paris', 'Madrid']
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: [{
                    name: 'Cities',
                    data: [1000, 2500, 1500]
                }]
            })
          }
        });
        </script>
    </dom-module>

Answer 3

嘿，您可以使用Highchart-Chart来做同样的事情。

product.getProduct(, function(product) {
    if (hasProduct) //do stuff
    else //do other stuff
});

点击运行代码段以查看图表！

就是这样！还有更多带有实时数据的示例here。

Answer 4

我添加了这个答案，因为我在其他地方找不到这个解决方案，不幸的是，带有Polymer 1.x的Highchart-Chart软件包对我来说也不起作用。

我注意到元素正在创建/渲染，但它没有正确附加到自定义Polymer元素（例如my-chart）。

唯一有效的方法是在创建Highchart后使用this.appendChild(this.$.container);。

您的代码将是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<dom-module id="my-chart">
    <template>
        <div id="container" style="max-width: 600px; height: 360px;"></div>
    </template>

    <script>
        Polymer({
            is: "my-chart",
            ready: new Highcharts.Chart({
                chart: {
                    type: 'bar',
                    renderTo: this.$.container // Renders to div#container in this module only
                },
                title: {text:  'HI'},
                xAxis: {
                    categories: ['London', 'Paris', 'Madrid']
                },
                yAxis: {
                    title: {
                        text: 'Sales'
                    }
                },
                series: [{
                    name: 'Cities',
                    data: [1000, 2500, 1500]
                }]
            })
        });
        this.appendChild(this.$.container); // Add highcharts to Polymer element DOM
    </script>
</dom-module>

注意： Highcharts.chart（{...}）不需要存储到变量中。

这应避免param 1 is not Node错误。

尝试在Polymer中创建Highcharts元素

4 个答案: