2015-12-15 32 views
3

請告訴我們如何製作水平圖例。如何製作圖例水平

而且這裏的結果:

enter image description here

但我想這一點: enter image description here

我有以下代碼:

<script type="text/javascript"> 
 

 
     //$(function() { 
 
     function getJson() { 
 
      var result = []; 
 
      $.ajax({ 
 
       url: "WebService1.asmx/GetJson3", 
 
       success: function (data) { 
 
        $.each(data, function (key, value) { 
 
         item = { 
 
          "company": value.BusinessUnitName, 
 
          "revenue": value.QTY_Case, 
 
          "expenses": value.QTY_Case_Target, 
 
          "cos": value.QTY_Case_LY 
 
         } 
 
         result.push(item); 
 
        }); 
 
       }, 
 
       async: false, 
 
      }); 
 

 
      $("#columnChart").igDataChart({ 
 
       width: "280px", 
 
       height: "200px", 
 
       dataSource: result, 
 
       legend: { 
 
        element: "columnLegend" 
 
       }, 
 

 
       title: "title", 
 
       subtitle: "subtitle", 
 

 
       axes: [{ 
 
        name: "xAxis", 
 
        type: "categoryX", 
 
        //label: "company", 
 
        labelTopMargin: 5, 
 
        gap: 0.4, 
 
        overlap: 0.0, 
 
    
 
       }, { 
 
        name: "yAxis", 
 
        type: "numericY", 
 
        maximumValue: 250000, 
 
        interval: 50, 
 
        minimumValue: 0, 
 
        formatLabel: function (val) { 
 
         var bVal = (val/10000), 
 
         rounded = Math.round(bVal * 100)/100; 
 
         return rounded + "M"; 
 
        } 
 
       }], 
 
       series: [{ 
 
        name: "series1", 
 
        title: "revenue", 
 
        type: "column", 
 
        isTransitionInEnabled: true, 
 
        xAxis: "xAxis", 
 
        yAxis: "yAxis", 
 
        valueMemberPath: "revenue" 
 
       }, { 
 
        name: "series2", 
 
        title: "expenses", 
 
        type: "column", 
 
        isTransitionInEnabled: true, 
 
        xAxis: "xAxis", 
 
        yAxis: "yAxis", 
 
        valueMemberPath: "expenses" 
 
       }, { 
 
        name: "series3", 
 
        title: "cos", 
 
        type: "column", 
 
        isTransitionInEnabled: true, 
 
        xAxis: "xAxis", 
 
        yAxis: "yAxis", 
 
        valueMemberPath: "cos" 
 
       }, 
 
       ] 
 
      }); 
 

 
     } 
 
     $(function() { 
 
      getJson(); 
 
     }); 
 

 
    </script>

我希望能有所指導。 謝謝, 最好的方面

+0

我不知道HTML輸出是什麼樣子,但你也許能的三個要素(收入,支出,COS)設置爲每個有'display'在CSS'直列block'的。因爲你在這裏有CSS標籤。 – Sam

+1

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=igDataChart+horizo​​ntal+legend第一個結果是有人問同一個問題,他們得到了答案 –

+0

感謝山姆和安德魯骨頭 這是非常好的意見。我只是添加了一些代碼,因爲他們引導你。這是成功。 最好的方面 – hibino

回答

0

這個問題在Andrew Bone提供的鏈接中回答。我將在這裏發佈答案,以便它可見。

使屬於圖例的表格行顯示爲inline-block

#columnLegend tr { 
    display: inline-block; 
} 

另一個建議,我已經根據您提供的是不使$.ajax調用同步的代碼。只需在成功回調中初始化igDataChart即可。

$.ajax({ 
    url: "WebService1.asmx/GetJson3", 
    success: function (data) { 
     $.each(data, function (key, value) { 
      item = { 
       "company": value.BusinessUnitName, 
       "revenue": value.QTY_Case, 
       "expenses": value.QTY_Case_Target, 
       "cos": value.QTY_Case_LY 
      } 
      result.push(item); 
      initChart(); 
     }); 
    } 
}); 
+0

你好康斯坦丁Dinev, \t 感謝您的意見。 我添加了代碼: #columnLegend tr {display:inline-block;}。其中