尝试在 Polymer 中创建 Highcharts 元素答案

【问题标题】：Trying to create Highcharts element in Polymer尝试在 Polymer 中创建 Highcharts 元素
【发布时间】：2015-06-29 12:42:45
【问题描述】：

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

'Highcharts 错误 #13 未找到渲染 div

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

谁能解释一下如何将图表加载到模板 div id="container" 中？非常感谢任何指向工作高图/聚合物元素的链接:)

我的代码（我正在使用聚合物入门套件，因此从 elements.html 链接到聚合物/webcomponents 并在 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>

【问题讨论】：

如果其中任何一个回答了您的问题，请将其中一个标记为正确答案。

标签： highcharts polymer

【解决方案1】：

尝试，使用

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

【讨论】：

你在编辑后测试过吗？ new Highcharts.Chart() 返回一个带有选项和方法的对象。在下一行中，您试图将该对象附加到 HTML？我很确定会有错误：param 1 is not Node.
您好，感谢您的回答，但我仍然遇到同样的错误：

【解决方案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>

【讨论】：

【解决方案3】：

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

<!-------------------------------------|
Normal Import is done the way below:
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">

For the sake of a demo I will use a CDN
--------------------------------------->
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">

<highcharts-chart type="bar" x-axis='{"categories": ["London","Paris","Madrid"]}' title="Hi" x-label="Cities" data='[1000,2500,1500]' y-label="Sales"></highcharts-chart>

点击运行代码sn-p查看图表！

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

【讨论】：

【解决方案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 错误。

【讨论】：