人力车辅助Y轴（使用导轨）

Question

我正在尝试（使用人力车）使用我自己的数据集创建类似于http://code.shutterstock.com/rickshaw/examples/scaled.html的东西。我只是稍微修改了代码以匹配我的数据集，但出于某种原因我遇到了问题。

• 我有两个线图，两个都在不同的y轴刻度上（一组y值始终在0和1之间，另一组可以在1到3k之间变化，所以我想使用辅助轴）
• 图片未显示次Y轴，即使从绘制的两条线的外观判断正在实施次轴。

这是我的代码（注意：element: document.getElementById('axis0')由预先定义的css搞砸了我当前的格式，所以我评论了这一行。前后评论辅助轴没有显示）

    var data, max, min, point, random, scales, series, _j, _k, _l, _len, _len1, _len2, _ref;

data = [gon.calories_consumed, gon.percent_towards_goal];



scales = [];

_ref = data[1];
for (_j = 0, _len = _ref.length; _j < _len; _j++) {
  point = _ref[_j];
  point.y *= point.y;
}


// for each series find the max (min) value
// for each element within each ser
for (_k = 0, _len1 = data.length; _k < _len1; _k++) {
  series = data[_k];
  min = Number.MAX_VALUE;
  max = Number.MIN_VALUE;
  for (_l = 0, _len2 = series.length; _l < _len2; _l++) {
    point = series[_l];
    min = Math.min(min, point.y);
    max = Math.max(max, point.y);
  }
  if (_k === 0) {
    scales.push(d3.scale.linear().domain([min, max]).nice());
  } else {
    scales.push(d3.scale.pow().domain([min, max]).nice());
  }
}


var graph = new Rickshaw.Graph( {
  element: document.getElementById("chart"),
  renderer: 'multi',
  width: 900,
  height: 500,
  dotSize: 5,
  padding:{top:0.01 , right:.01 , bottom:.01 , left:0} ,
  //need to put in x,y pairs
  series: [
    {
      name: 'Calories',
      data: gon.calories_consumed,
      color: 'steelblue',
      renderer: 'line' ,
      scale: scales[0]


    }, {
      name: 'Percent towards goal',
      data: gon.percent_towards_goal,
      color: 'rgba(255, 127, 0, 0.4)',
      renderer: 'line',
      scale: scales[1]
    }
  ]
} );

new Rickshaw.Graph.Axis.Y.Scaled({
  //element: document.getElementById('axis0'),
  graph: graph,
  orientation: 'left',
  grid: false,
  scale: scales[0],
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});

new Rickshaw.Graph.Axis.Y.Scaled({
  //element: document.getElementById('axis1'),
  graph: graph,
  grid: false,
  orientation: 'right',
  scale: scales[1],
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});

new Rickshaw.Graph.Axis.Time({
  graph: graph
});


graph.render();


var detail = new Rickshaw.Graph.HoverDetail({
  graph: graph
});

Answer 1

您应该在DOM中创建元素axis0和axis1，并为两个Axes的element属性赋值 （查看http://code.shutterstock.com/rickshaw/examples/scaled.html示例）