如何使用外部json数据为jqplot中的两个条形图系列提供不同的颜色

时间:2017-01-24 07:06:11

标签: php jquery json

我有这样的系列[[5,3,2,5,7,16,4,15,13,​​19,6],这个系列是在另一个文件(json.txt)[10,2,1] ,4,6,12,11,17,13,26,11]。我想为第一个系列提供绿色,为第二个系列提供红色,我该如何使用jqplot。我想绘制条形图。

<!DOCTYPE html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script type="text/javascript" src="te/jquery.jqplot.js"></script>
  <script type="text/javascript" src="te/plugins/jqplot.barRenderer.js"></script>
  <script type="text/javascript" src="te/plugins/jqplot.json2.js"></script>
  <link rel="stylesheet" type="text/css" href="te/jquery.jqplot.css" />
  <script language="javascript" type="text/javascript" src="te/plugins/jqplot.categoryAxisRenderer.js"></script>
  <script type="text/javascript" src="te/plugins/jqplot.json2.js"></script>

  <script>
     $(document).ready(function(){
      // Our ajax data renderer which here retrieves a text file.
     // it could contact any source and pull data, however.
      // The options argument isn't used in this renderer.
        var ajaxDataRenderer = function(url, plot, options) {
        var ret = null;
        $.ajax({
         // have to use synchronous here, else the function
        // will return before the data is fetched
         async: false,
         url: url,
         dataType:"json",
         success: function(data) {
         ret = data;
         }
         });
       return ret;
      };

    // The url for our json data
    var jsonurl = "json.txt";

     // passing in the url string as the jqPlot data argument is a handy
  // shortcut for our renderer.  You could also have used the
     // "dataRendererOptions" option to pass in the url.
     var plot2 = $.jqplot('chart2', jsonurl,{
   title: "AJAX JSON Data Renderer",
  seriesColors:['#000000', '#ffffff'],
  seriesDefaults:{
           renderer:$.jqplot.BarRenderer,
           rendererOptions: {
                // Set varyBarColor to tru to use the custom colors on the bars.
                varyBarColor: true
             }
       },

        axes:{
           xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        },
     dataRenderer: ajaxDataRenderer,
    dataRendererOptions: {
      unusedOptionalUrl: jsonurl
    }
  });
 });

 </script>

   </head>
   <body>
       <div id="chart2" style="height:400px;width:100%; "></div>
   </body>
</html>

我没有获得一个系列的绿色和另一个系列的红色。

0 个答案:

没有答案