使用Highcharts顯示圖表

Question

我是javaScript的新手。 我試圖很好地掌握交互式圖表和內容。 為此，我下載了HighCharts庫...找不到任何合適的方法來使用它來打印圖形。嘗試了一些示例，但沒有一個起作用。 我目前在這里：

<body>

<script src="../../../Downloads/Highcharts JS/js/highcharts.js">
context = document.getElementById('myCanvas').getContext('2d');
context.fillRect(10,10,100,100);

var chart1 = new HighCharts.chart({
      chart: {
         renderTo: 'graphDiv',
         defaultSeriesType: 'bar'
      },
      title: {
         text: 'Fruit Consumption'
      },
      xAxis: {
         categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
         title: {
            text: 'Fruit eaten'
         }
      },
      series: [{
         name: 'Anne',
         data: [1, 0, 4]
      }, {
         name: 'Martin',
         data: [5, 7, 3]
      }]
   });

</script>
</body>

我想我缺少一些庫，或者這不是在javascript中包含庫的正確方法嗎？ 請指導我打印此圖。

Answer 1

您需要附加jquery並添加ID為“ graphDiv”的div，以在該位置打印圖表。

Answer 2

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
$(function () {
   $('#container').highcharts({
      chart: {
         renderTo: 'graphDiv',
         defaultSeriesType: 'bar'
      },
      title: {
         text: 'Fruit Consumption'
      },
      xAxis: {
         categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
         title: {
            text: 'Fruit eaten'
         }
      },
      series: [{
         name: 'Anne',
         data: [1, 0, 4]
      }, {
         name: 'Martin',
         data: [5, 7, 3]
      }]
   });
});
</script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

http://jsfiddle.net/7D3em/

使用Highcharts顯示圖表

問題描述

2 個解決方案

解決方案1
0 2013-12-04 15:53:15

解決方案2
0 已采納 2013-12-04 15:57:22

使用Highcharts顯示圖表

問題描述

2 個解決方案

解決方案1 0 2013-12-04 15:53:15

解決方案2 0 已采納 2013-12-04 15:57:22

解決方案1
0 2013-12-04 15:53:15

解決方案2
0 已采納 2013-12-04 15:57:22