0

Я хотел бы создать строки, такие как «Понедельник, Вторник, Среда» и т. Д. Для оси x в моей диаграмме строк nvd3 ниже. Как бы я сделать й-оси имеют строку/метки вместо того, чтобы быть числовым, в коде ниже:Создание меток оси x с использованием углового NVD3

$scope.options2 = { 
    chart: { 
     type: 'lineChart', 
     height: 250, 
     margin : { 
      top: 20, 
      right: 20, 
      bottom: 40, 
      left: 35 
     }, 
     x: function(d){ return d.x; }, 
     y: function(d){ return d.y; }, 
     useInteractiveGuideline: true, 
     dispatch: { 
      stateChange: function(e){ console.log("stateChange"); }, 
      changeState: function(e){ console.log("changeState"); }, 
      tooltipShow: function(e){ console.log("tooltipShow"); }, 
      tooltipHide: function(e){ console.log("tooltipHide"); } 
     }, 
     xAxis: { 
      axisLabel: 'Time' 
     }, 
     yAxis: { 
      axisLabel: 'cd(ng/ml)', 
      tickFormat: function(d){ 
       return d3.format('.02f')(d); 
      }, 
      axisLabelDistance: -10 
     }, 
     callback: function(chart){ 
      console.log("!!! lineChart callback !!!"); 
     } 
    }, 
    title: { 
     enable: true, 
     text: 'Afternoon' 
    }, 
    subtitle: { 
     enable: false, 
     text: '', 
     css: { 
      'text-align': 'center', 
      'margin': '10px 13px 0px 7px' 
     } 
    } 
}; 

var datax = [{ 
    "key" : "cope", 
    "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}] 
}];  
$scope.data2 = datax; 

Я использую эту библиотеку: https://github.com/krispo/angular-nvd3

ответ

1

EDIT: написал пост думая, что вы хотели месяц , поэтому изменено на будний день ...

Что вы ищете, это метод xAxis.tickFormat. Предполагая, что вы используете moment.js в вашем приложении, вы можете просто сделать следующее:

xAxis: { 
    axisLabel: 'Time', 
    tickFormat: function(d) { 
    return moment().weekday(d).format('dddd');; // for 0, returns 'Sunday' 
              // 'Sun' if format 'ddd' 
    } 
} 

Если вы не используете момент, то вы можете просто создать массив дни недели и карта х-значения к тот же индекс в массиве:

var daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 
... 
tickFormat: function(d) { 
    return daysOfWeek[d]; 
},... 

Here's a plunker with the moment.js example implemented. Надеюсь это поможет!

Смежные вопросы