如何使jqPlot能够以条形图示例工作

对于成为这个newby感到抱歉，但我试图让这个例子工作开始深入挖掘。如何使jqPlot能够以条形图示例工作

我只是想从jqPlot运行一个例子。我改编了他们的代码到我的页面上：

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 
     <title>Tests</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 
     <div>Testing a chart 2</div> 

     <script type="text/javascript" src="jqplot.barRenderer.min.js"></script> 
     <script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script> 
     <script type="text/javascript" src="jqplot.pointLabels.min.js"></script> 

     <script language=javascript type="text/javascript"> 
       $(document).ready(function() { 
        var s1 = [200, 600, 700, 1000]; 
        var s2 = [460, -210, 690, 820]; 
        var s3 = [-260, -440, 320, 200]; 
        // Can specify a custom tick Array. 
        // Ticks should match up one for each y value (category) in the series. 
        var ticks = ['May', 'June', 'July', 'August']; 

        var plot1 = $.jqplot('chart1', [s1, s2, s3], { 
         // The "seriesDefaults" option is an options object that will 
         // be applied to all series in the chart. 
         seriesDefaults: { 
          renderer: $.jqplot.BarRenderer, 
          rendererOptions: {fillToZero: true} 
         }, 
         // Custom labels for the series are specified with the "label" 
         // option on the series option. Here a series option object 
         // is specified for each series. 
         series: [ 
          {label: 'Hotel'}, 
          {label: 'Event Regristration'}, 
          {label: 'Airfare'} 
         ], 
         // Show the legend and put it outside the grid, but inside the 
         // plot container, shrinking the grid to accomodate the legend. 
         // A value of "outside" would not shrink the grid and allow 
         // the legend to overflow the container. 
         legend: { 
          show: true, 
          placement: 'outsideGrid' 
         }, 
         axes: { 
          // Use a category axis on the x axis and use our custom ticks. 
          xaxis: { 
           renderer: $.jqplot.CategoryAxisRenderer, 
           ticks: ticks 
          }, 
          // Pad the y axis just a little so bars can get close to, but 
          // not touch, the grid boundaries. 1.2 is the default padding. 
          yaxis: { 
           pad: 1.05, 
           tickOptions: {formatString: '$%d'} 
          } 
         } 
        }); 
       }); 
     </script> 

     <div id="chart1" style="height:400px;width:300px; "></div> 

     <br><a href="/Test/index.html">Home</a> 
    </body> 
</html>

请看我创建的图表名称为“chart1”的div。相应地添加了插件。

感谢

来源

2014-02-10 user1060551

只是一个小FYI：'语言=从来没有真正需要javascript'和'类型= “文/ JavaScript的”'一直没有需要多年（当然不是在使用'<！DOCTYPE html>'时），所以你可以使用'

如何使jqPlot能够以条形图示例工作

相关问题