nvd3 line chart with string values on x-axis

后端 未结 2 666
长情又很酷
长情又很酷 2020-12-28 17:36

i\'m new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart, but i need a line, instead of bars

my result

相关标签:
2条回答
  • 2020-12-28 18:00

    like dcclassics mentioned i took number values instead of strings and then used tickValues and tickFormat:

    var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
    
    chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
    .tickFormat(function(d){
        return days[d]
    });
    

    this solutions worked for me

    0 讨论(0)
  • 2020-12-28 18:09

    Working solution:

    var data = [{"color":"#a215af","key":"products","values":[
        {"y":0,"x":0},
        {"y":0,"x":1},
        {"y":1,"x":2},
        {"y":6,"x":3},
        {"y":2,"x":4},
        {"y":0,"x":5},
        {"y":13,"x":6}]}] 
    
    nv.addGraph(function() {
      var chart = nv.models.lineChart()
        .useInteractiveGuideline(true) 
        .transitionDuration(350)
        .x(function(d) { return d.x}) 
        .y(function(d) { return d.y}) 
        .showLegend(true)
        .showYAxis(true)
        .showXAxis(true);
    
      var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
    
      chart.xAxis
        .tickValues([0, 1, 2, 3, 4, 5, 6])
        .tickFormat(function(d){
          return days[d]
        });
    
      d3.select(element + ' svg')
        .datum(data) 
        .call(chart);
    
      nv.utils.windowResize(chart.update);
    
      return chart;
    });
    
    0 讨论(0)
提交回复
热议问题