3

我需要建立一个图表来按地区显示世界人口，样本数据将是  

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吗？

提前致谢。

4

2 回答 2

3

您可以使用 valueFormatter 和 axisLabelFormatter 选项。见http://dygraphs.com/options.html

以下示例将在图例中打印“文本：”以及数据中的 x 值。

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

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

于 2013-11-27T10:38:59.870 回答
1

@user3020781 x 轴的这两个选项也帮助了我，谢谢！我还遇到了整数之间有 0.5 步的问题，发现问题是我的图表设置得太宽了，我在 x 轴上只绘制了 6 个组，所以 dygraph 会自动添加半步。

几个解决方案：
1. 在 .5 步的 switch 语句中添加案例
2. 在 x 轴内使用 pixelPerLabel 选项。x 轴的默认值为 60，我加倍得到 120，它修复了我的。
3. 使整个图更小。我的都设置为 1000px 宽。

两者都解决了我的问题。这是 Dygraph 代码。我注释掉了 case 语句，因为我使用了 pixelPerLabel 修复程序。 

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-21T20:51:53.480 回答