Question

首先对大家说，我是dojo图表的新手。我制作了一个dojo聚集柱形图。在这里，我为show clustered chart制作了不同的系列。但这里是我的图表显示不同卧室的不同颜色及其各自的项目名称。但我希望我的图表显示不同的项目明智的颜色与他们各自的卧室。对于这个问题，我在过去的5天里遇到了这个问题，但是没有得到任何正确的解我从Stack Overflow建议中搜索但是我失败了。所以请告诉我如何用卧室明智地展示我的图形与不同的不同颜色的项目。这里我正在制作一个jsfiddle链接[http://jsfiddle.net/sunman/rV9g4/]。

这是我的代码 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);

    });
    });

请参考上面的代码，并告诉我如何通过不同的彩色项目让我的图表卧室明智。

聚簇列表中的Dojo图表问题

0 个答案: