Question

我正在尝试

绘制条形图
与分类数据（仅绘制现有的x值/标签）
（奖励：自动调整画布大小，包括最左边和最右边的栏）

然而，dygraphs根据输入值缩放x轴，并且我有很多不需要的空白区域。

我期望会是

（酒吧之间没有多余的空间）

而不是：

我的HTML / dygraphs来源：

<html>
<head>
<script type="text/javascript"
  src="dygraph-combined.js"></script>
</head>
<script type="text/javascript"
  src="dygraph-combined-dev.js"></script>
</head>
<script type="text/javascript">

var example_data = "time,idx_cpu_avg\n"+
"2015-07-24 10:40:05,37.0229\n"+
"2015-07-24 10:41:35,11.6869\n"+
"2015-07-24 12:03:15,37.0358\n"+
"2015-07-24 12:04:05,11.4845\n"+
"2015-07-24 13:36:38,36.8488\n"+
"2015-07-24 13:37:24,11.2219\n"+
"2015-07-27 18:30:40,36.859\n"+
"2015-07-27 18:31:29,11.3381\n"+
"2015-07-28 06:28:14,110.215\n"+
"2015-07-28 06:29:01,26.5677\n"

function barChartPlotter(e) 
{
  var ctx = e.drawingContext;
  var points = e.points;
  var y_bottom = e.dygraph.toDomYCoord(0);  // see http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord

  // This should really be based on the minimum gap
  var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx);
  ctx.fillStyle = e.color;

  // Do the actual plotting.
  for (var i = 0; i < points.length; i++) {
    var p = points[i];
    var center_x = p.canvasx;  // center of the bar

    ctx.fillRect(center_x - bar_width / 2, p.canvasy,
        bar_width, y_bottom - p.canvasy);
    ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
        bar_width, y_bottom - p.canvasy);
  }
}

</script>
</head>
<body>
    <h2>index values as bar chart (skipping missing values)</h2>
    <div id="graphdiv4"
      style="width:500px; height:300px;"></div>
    <script type="text/javascript">
      g2 = new Dygraph(
        document.getElementById("graphdiv4"),
        example_data,
        {
            plotter: barChartPlotter, // barChartPlotter,
            connectSeparatedPoints: false
        }          // options
      );
    </script>
</body>
</html>

Answer 1

Your best bet would be to add a new column with values 0, 1, 2, 3, etc. to force the even spacing that you want. You'd have to suppress this value from the legend and set the x-axis axisValueFormatter to generate dates instead of 0, 1, 2, 3.

If this sounds like too much work, you might find it easier to generate this particular chart with a more general tool like D3.

Answer 2

正如danvk建议的那样，您应该使用值0,1,2,3等重命名列以强制所需的偶数间距。然后你

必须从图例中抑制此值，并设置x轴axisLabelFormatter以生成要显示的值，而不是0,1,2,3。与valueFormatter方法相同，以便在图例中显示正确的值。

以下是代码：

axes: {
      x: {
        valueFormatter: function(x) {
          switch (x) {
            case 1:
              return 'Corresponding string';
              break;
            case 2:
              return 'Corresponding string';
              break;
            case 3:
              return 'Corresponding string';
              break;
            case 4:
              return 'Corresponding string';
              break;
            default:
              return '';
           }
         },
         axisLabelFormatter: function(x) {
           switch (x) {
             case 0:
               return 'Corresponding string';
               break;
             case 1:
               return 'Corresponding string';
               break;
             case 2:
               return 'Corresponding string';
               break;
             case 3:
               return 'Corresponding string';
               break;
             ...
             default:
               return '';
           }
         }
       }
}

dygraphs：在条形图中跳过缺失值

2 个答案: