Question

我需要构建一个图表来显示区域的世界人口，并且示例数据将是

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

先谢谢。

Answer 1

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

以下示例将打印＆＃39;文字：＆＃39;在图例内部和数据中的x值。

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

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

Answer 2

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

夫妻解决方案：
1.在.5步骤的switch语句中添加案例 2.在x轴内使用pixelsPerLabel选项。 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

}  );

在Dygraphs中，如何将AxisLabels显示为Text而不是Numbers / Date

2 个答案: