Dojo chart issues in clusterd column chart

2019-09-01 02:36发布

问题:

Firstly say to all of you i am new to dojo charts. I made a dojo clustered column chart. Here i am made different series for show clustered chart. But here is my graph shows different color for different bedrooms with their respective project name. But i want my graph shows like different projects wise color with their respective bedrooms. For this problem i am facing from last 5 days but can not got any proper solutions. I searched from Stack Overflow suggestions but i am failed. So please tell me how can i show my graph with bedroom wise with different different colored projects.Here i am making a jsfiddle link[ http://jsfiddle.net/sunman/rV9g4/ ] .

Here is my code index.php

      $series1 =array();
      $result = array();
     $Bedroom_Area=$conn->prepare("SELECT  penthouse.*,projects_detail.Project_name From penthouse 
       left join projects_detail on penthouse.project_id=projects_detail.project_id where penthouse.project_id in (1,8,14,29,33,101)
     ");
    $Bedroom_Area->execute();
   //$i=0;
while($result_Bed=$Bedroom_Area->fetch()){

    $series1[] =  array('month' => $result_Bed['Project_name'],'BedRoom2'=> $result_Bed['bed_room2'], 
    'BedRoom3' => $result_Bed['bed_room3'],'BedRoom4' => $result_Bed['bed_room4'],
  'BedRoom5' => $result_Bed['bed_room5']);
    //$array1[]= array("value" => $i, "text" => $result_Bed['Project_name']);
    //$i++;

  }
   print json_encode($series1,JSON_NUMERIC_CHECK);


         var switchClustering;

         require(["dojo/_base/declare", "dojo/ready", "dojo/dom",              "dojox/charting/Chart",
     "dojo/store/Memory", "dojox/charting/StoreSeries", "dojo/on", "dojox/gesture/tap",
    "dojox/charting/themes/PlotKit/blue", "dojox/charting/axis2d/Default",
       "dojox/charting/plot2d/StackedColumns",     "dojox/charting/plot2d/ClusteredColumns",
      "dojox/charting/plot2d/Grid", "dojox/charting/action2d/Tooltip",            "dojox/charting/action2d/Highlight"],
          function(declare, ready, dom, Chart, Memory, StoreSeries, on, tap, blue, Default,
            StackedColumns, ClusteredColumns, Grid, Tooltip, Highlight){

           var chart;

        var sales = <?php echo  json_encode($series1,JSON_NUMERIC_CHECK);?>;

           ready(function() {
  var store = new Memory({ data: sales });
  var clustered = true;
  var monthLabel = function(index){
  if(index>12 || index<1){
  return "";
  }
    return sales[index-1].month;
   };


      chart = new Chart("chart").

        setTheme(blue).
           addAxis("x", {title:"Project Name",
                      titleGap: 5, 
                      titleFont: "bold bold bold 12pt Arial,sans-serif",
                      titleOrientation: "away", 
                      dropLabels: false,
                      labelSizeChange: true,
                      rotation:-20,
                       majorTickStep: 1,
    minorTicks: false, 
  labelFunc: monthLabel,
 minorLabels: false}).
 addAxis("y", { 
 vertical: true,
 fixLower: "major",
 fixUpper: "major", 
 includeZero: true,
 majorTickStep: 10,
  max: 500, 
   title: "Bedroom Comparision" }).
   addPlot("default", {type: ClusteredColumns,
    gap: 10, 
   //maxBarSize: 35, 
     vAxis: "y",
    animate: true}).
       addPlot("grid", { type: "Grid",
      vMajorLines: false, 
       vAxis: "y"}).
      addSeries("data1", new StoreSeries(store, {}, function(item){
       return item.BedRoom2;
   }), { plot: "default",
    stroke: {
            color: null
        },
        fill: "#f7a35c"}).
        addSeries("data2", new StoreSeries(store, {}, function(item){
       return item.BedRoom3;
        }), {plot: "default" ,
         stroke: {
            color: "#FFFFFF"
        },
        fill: "#8bbc21"}).
         addSeries("data3", new StoreSeries(store, {}, function(item){
         return item.BedRoom4;
        }), {plot: "default" ,
         stroke: {
            color: null
        },
        fill: "#2f7ed8"}).
    addSeries("data4", new StoreSeries(store, {}, function(item){
      return item.BedRoom5;
      }), {plot: "default",
         stroke: {
            color: null
        },
        fill: "#9966FF"});
  chart.title = "Bedroom Comparision";
  chart.render();


  on(dom.byId("chart"), tap.doubletap, switchClustering);

    });
    });

Please refer above code and tell me how can got my graph bedroom wise with different different colored projects.