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 个答案: