在Dygraphs，如何顯示AxisLabels作爲文本而不是數字/日期

我需要建立一個圖展現世界人口通過區域和樣本數據將在Dygraphs，如何顯示AxisLabels作爲文本而不是數字/日期

China   1,361,300,000 
India   1,236,970,000 
United States 317,148,000 
Indonesia  237,641,326 
Brazil   201,032,714

我新Dygraphs，我試圖在同一個簡單的例子：

<html> 
<head> 
<script type="text/javascript" 
    src="http://dygraphs.com/dygraph-combined.js"></script> 

</head> 
<body> 
<div id="demodiv" style="width:500px;height:500px"></div> 
<script type="text/javascript"> 
var data = "Country,Population\n" + 
    "1,1361300000\n" + 
    "2,1236970000\n" + 
    "3,317148000\n" + 
    "4,237641326\n" + 
    "5,201032714\n"; 
g = new Dygraph(document.getElementById("demodiv"), data, { 
    title: "World's Population" 
}); 
</script> 
</body> 
</html>

現在，我如何使用Dygraphs顯示國家名稱而不是x-Axis上的數字？ Dygraphs可能嗎？

在此先感謝。

來源

2013-11-27 Pradeep

您可以使用valueFormatter和axisLabelFormatter選項。請參閱http://dygraphs.com/options.html

以下示例將在圖例內打印「text：」，並在數據中打印x值。

axes: { 
    x: { 
     valueFormatter: function(x) { 
     return 'text'; 
     }, 
     axisLabelFormatter: function(x) { 
     return x; 
     }, 
    } 
},

例中的jsfiddle：http://jsfiddle.net/JaM3S/

來源

2013-11-27 10:38:59 user3020781

感謝您的回覆，那就是我一直在尋找的東西，而且根據我的要求我修改了一下。請參閱jsfiddle：http://jsfiddle.net/JaM3S/1/。但我面臨的一個問題是，在我的本地設置中，上面提到的示例代碼生成的x軸值爲1,1.5,2,2.5等等，而不僅僅是1,2,3等...不知道是否我相比於你的例子，我錯過了任何東西。 – Pradeep

對不起，我不太關注。你的本地設置導致浮點在你的x軸，但在你的jsfiddle它的作品？也許你使用rollPeriod或showRoller選項？ – user3020781

@ user3020781這兩個選項x軸幫我爲好，謝謝！我還有一個問題，在整個數字之間有0.5個步驟，發現問題是我的圖表設置得太寬，我只在x軸上繪製了6個組，因此dygraph會自動添加半個步驟。

夫婦的解決方案：
1.添加例中爲0.5的switch語句步驟
2.使用內的x軸的pixelsPerLabel選項。 X軸的默認值是60，我加倍得到120，這是固定的。
3.縮小整個圖形。我的設置都是1000px寬。

兩者都適用於我的問題。這是Dygraph代碼。我評論了案例陳述，因爲我去了pixelsPerLabel修復。

g = new Dygraph(
    document.getElementById("graphdiv"), 
    dataArray, 
{ 
    xlabel: "x something", 
    ylabel: "y something", 
    title: "The coolest chart ever!", 
    labels: ["FR", "Avg1", "Avg2"], 
    labelsDiv: document.getElementById("labelsdiv"), 
    labelsSeparateLines: true, 
    width:1000, 
    colors: ["#339933", "#990000"], 
    strokeWidth: 2.5, 
    valueRange: [4, 5.8], 
    axes: { 
     x: { 
      /*the space between grid lines on x axis: default is 60px*/ 
      pixelsPerLabel: 120, 
      valueFormatter: function(FR) { 
       var ret; 
       switch (FR){ 
        case 1: 
         ret = 'A';     
         break; 
        case 2: 
         ret = 'B';     
         break; 
        case 3: 
         ret = 'C';     
         break; 
        case 4: 
         ret = 'D';     
         break; 
        case 5: 
         ret = 'D';     
         break; 
        case 6: 
         ret = 'F';     
         break; 
        /*case 1.5: 
         ret = '';     
         break; 
        case 2.5: 
         ret = '';     
         break; 
        case 3.5: 
         ret = '';     
         break; 
        case 4.5: 
         ret = '';     
         break; 
        case 5.5: 
         ret = '';     
         break; 
        case 6.5: 
         ret = '';     
         break;*/ 
       }//end switch 
       return ret; 
      },//end of label formatter, 
      axisLabelFormatter: function(FR) { 
       var ret; 
       switch (FR){ 
        case 1: 
         ret = 'A';     
         break; 
        case 2: 
         ret = 'B';     
         break; 
        case 3: 
         ret = 'C';     
         break; 
        case 4: 
         ret = 'D';     
         break; 
        case 5: 
         ret = 'E';     
         break; 
        case 6: 
         ret = 'F';     
         break; 
        /*case 1.5: 
         ret = '';     
         break; 
        case 2.5: 
         ret = '';     
         break; 
        case 3.5: 
         ret = '';     
         break; 
        case 4.5: 
         ret = '';     
         break; 
        case 5.5: 
         ret = '';     
         break; 
        case 6.5: 
         ret = '';     
         break;*/ 
       }//end switch 
       return ret; 
      }//end of axis label formatter   
     }//end of x axis 
    }//end of axis 

} );

來源

2014-01-21 20:51:53 Leighbee

在Dygraphs，如何顯示AxisLabels作爲文本而不是數字/日期

回答

相關問題