使用 Highcharts 显示图表答案

【问题标题】：Displaying a chart using Highcharts使用 Highcharts 显示图表
【发布时间】：2013-12-04 23:57:22
【问题描述】：

我对 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 中包含库的正确方法？请指导我打印此图表..

【问题讨论】：

你应该添加 jquery

标签： javascript html charts highcharts

【解决方案1】：

<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 已经使用画布来显示图表。你为什么要这样做？
实际上我正在尝试制作一个 Web 应用程序，在该应用程序中，用户只需单击图标，然后单击 cnavas 内部即可绘制图表和图形，图表应在该位置绘制（数据将由文件中的用户）
你可以用 div 做同样的事情，不是吗？您必须使用用户选择的文件在用户单击的 div 上绘制图表。
是的.. 但我也提供了一个绘画应用程序，所以它必须是画布。我发现了另一个库“chart.js”，我认为这是我的问题的解决方案。感谢您的帮助
在这种情况下，您是对的，如果您想深入研究代码，最好使用 chart.js。此外，它是免费的，而 HighCharts 并非如此。欢迎

【解决方案2】：

您需要附加 jquery 并添加 id 为“graphDiv”的 div，其中将打印图表。

【讨论】：