无法在我的人力车图表上显示轴

时间:2013-08-30 14:38:34

标签: json rickshaw

我正在尝试向我的图表显示x轴和y轴。 我正在使用JSON作为数据。

这是我的以下代码:

new Rickshaw.Graph.Ajax( {

  element: document.getElementById("chart"),
  width: 580,
  height: 300,
  renderer: 'line',
  dataURL: 'dataoutevo.json',
  onData: function(d) { 
    return d },
  onComplete: function(transport) {
    var graph = transport.graph;
    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
      graph: graph
    } );

   var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
      graph: graph,
      legend: legend
    } );
  },
  series: [
    {
      name: 'ligne1',
      color: '#c05020',
    }, {
      name: 'ligne2',
      color: '#30c020',
    }, {
      name: 'ligne3',
      color: '#6060c0'
    }, {
      name: 'ligne4',
      color: 'red'
    }
  ],
  onComplete: function() {
    var x_axis = new Rickshaw.Graph.Axis.Time({
      graph: graph
    });
    x_axis.graph.update();
  }
} 

);

任何人都可以帮助我并告诉我该怎么做吗? 我有数字作为x和y数据(不是单词)

2 个答案:

答案 0 :(得分:2)

new Rickshaw.Graph.Ajax( {
  element: document.getElementById("chart"),
  width: 580,
  height: 300,
  renderer: 'line',
  dataURL: 'dataoutevo.json',
  onData: function(d) { d[0].data[0].y = 80; return d },
    onComplete: function(transport) {
      // important . do not forget
      var graph = transport.graph;

      var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
      var legend = new Rickshaw.Graph.Legend({graph: graph,element:   document.querySelector('#legend')});

      var xAxis = new Rickshaw.Graph.Axis.Time({graph: graph});
      xAxis.render();

      var yAxis = new Rickshaw.Graph.Axis.Y({graph: graph});
      yAxis.render();

      var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
        graph: graph,
        legend: legend
      });

      var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
        graph: graph,
        legend: legend
      });
      var order = new Rickshaw.Graph.Behavior.Series.Order({
        graph: graph,
        legend: legend
      });
   },
   series: [
     {
       name: 'ligne1',
       color: '#c05020',
     }, {
       name: 'ligne2',
       color: '#30c020',
     }, {
       name: 'ligne3',
       color: '#6060c0'
     }, {
       name: 'ligne4',
       color: 'red'
     }
   ],
});

答案 1 :(得分:0)

在非常类似的情况下,将Rickshaw.Graph.Axis.Time更改为Rickshaw.Graph.Axis.X对我有用。顺便说一下,你的示例代码显示了onComplete的两个定义,我认为这不是一个定义吗?