我正在爲我的項目使用Polymer和HighCharts。我使用的代碼是：HighCharts未在聚合物頁面上渲染

HTML：

<div class="container" layout vertical center> 
     <paper-shadow z="1" class="span-shadow"> 
      <post-card id="card1"> 
      <img width="70" height="70" src="../images/graphex.jpg"> 
      <h2>Some Graph</h2> 
      <div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      </post-card> 
     </paper-shadow>

和JS：

$(function() { 
    $('#container2').highcharts({ 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
    }); 
});

不過，雖然正確生成卡，裏面的圖形是不可見的，我得到這個錯誤：

TypeError: undefined is not an object (evaluating 'HighchartsAdapter.addEvent') (anonymous function)highcharts.js:304:237 (anonymous function)highcharts.js:306:162 global codehighcharts.js:322 exporting.js:9

和

ReferenceError: Can't find variable: $

如何解決此錯誤？

謝謝！

來源

2015-02-24 Shivam Bhalla

'$ is not defined'是因爲你的頁面沒有jQuery。在頁面上使用Jquery腳本，然後重試。 – 2015-02-24 11:10:53

'' – 2015-02-24 11:12:09

任何更新？ – 2015-02-25 05:58:43

Highcharts沒有在您的頁面上定義，因此請將Highcharts的腳本放在您的頁面頂部。然後使用：

var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container2' 
     }

代替：

$('#container2').highcharts({ .. });

這裏的工作fiddle

來源

2015-02-25 08:11:47

是的，現在可以工作。謝謝！ – 2015-02-25 10:36:21

你可以使用它Highcharts-Chart允許你做同樣的事情，但你的管理依賴你。並且還支持數據綁定和事件支持。

您的問題：

<head> 
    <link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html"> 
</head> 
<body> 
    <template is="dom-bind" id="app"> 
    <highcharts-chart id="Chart" x-axis='{"categories": [[arr2str(chartInfo.categories)]]}' type="spline" title="Monthly Average Temperature" subtitle="Source: WorldClimate.com" x-label="Months" tooltip-options='{"valueSuffix": "&deg;C"}' on-after-print="getData" y-label="Average"></highcharts-chart> 
    </template> 
    <script> 
    var app = document.querySelector("#app") 
    app.chartInfo = { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     data: [ 
     {name: "Tokyo", series: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, 
     {name: "New York", series: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, 
     {name: "Berlin", series: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, 
     {name: "London", series: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}, 
     ] 
    } 
    app.arr2str = (arr)=>{return JSON.stringify(arr)} 
    app.async(()=>{ 
     app.$.Chart._chart.xAxis[0].update({categories: app.chartInfo.categories}) 
     app.chartInfo.data.forEach((el)=>{ 
     app.$.Chart.addSeries(el.name,el.series) 
     }) 
    },500) 
    </script> 
</body>

就是這樣！更多例子here。

編輯：

這裏是這樣做的新的更優化的方式：

<base href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/"> 
 
<link rel="import" href="highcharts-chart.html"> 
 
<body> 
 
    <template is="dom-bind" id="app"> 
 
    <highcharts-chart id="Chart" x-axis='[[makeCategorical]]' type="spline" title="Monthly Average Temperature" subtitle="Source: WorldClimate.com" x-label="Months" tooltip-options='{"valueSuffix": "&deg;C"}' data="[[chartData]]" y-label="Average"></highcharts-chart> 
 
    </template> 
 
    <script> 
 
    var app = document.querySelector("#app") 
 
    app.makeCategorical = {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']} 
 

 
    app.chartData = [ 
 
     {name: "Tokyo", data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, 
 
     {name: "New York", data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, 
 
     {name: "Berlin", data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]}, 
 
     {name: "London", data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]}, 
 
    ] 
 
    </script> 
 
</body>

點擊運行代碼片段，看看圖表！

來源

2015-11-25 14:38:03

HighCharts未在聚合物頁面上渲染

回答

編輯：

相關問題