Question

我有一个morris条形图和json数据。 Json数据返回了两个带有角度foreach的数据，如下所示：

data:[
{y:'01', a:25 ,b:45},
{y:'02', a:35 ,b:65}
]

'y'是'xkey'，表示月份，'01'=一月，'02'=二月。所以我想在xlabel中显示所有月份，并且只提取活动的数据。

我该如何使用有角度的foreach和月份名称呢？

代码：

 function barChart() {
  window.barChart = Morris.Bar({
   element: 'bar-chart',
   data: PeriodData,
   xkey: 'y',
   ykeys: ['a', 'b'],
   labels: ['Toplam Ciro', 'Toplam Paket'],
   postUnits: ' TL',
   lineColors: ['#1e88e5', '#ff3321'],
   lineWidth: '3px',
   xLabelAngle: 60,
   resize: true,
   redraw: true,
   hoverCallback: function(index, options, content, row) {
    var indexb = 2;
    var txtToReplace = $(content)[indexb].textContent;
    return content.replace(txtToReplace, txtToReplace.replace(options.postUnits, ""));
   }
  });
 }

和periodData;

angular.forEach(data, function(value, index) {
           PeriodData.push({
    y: data[index][dateType.toUpperCase()],
    a: data[index].TOTAL_CIRO,
    b: data[index].DELIVERY_TOTAL});
           });

Answer 1

您可以按以下方式使用函数xLabelFormat：

Morris.Line({
    element: 'chart_line_1',
    lineColors: ['#1e88e5', '#ff3321'],
    data: [
        {y:'01', a:25 ,b:45},
        {y:'02', a:35 ,b:65}
    ],
    xkey: 'date',
    ykeys: ['a', 'b'],
    labels: ['Toplam Ciro', 'Toplam Paket'],
    parseTime: false,
    dataLabels: false,
    xLabelFormat: function (x) { 
        if (x.src.y == '01') { return 'January'; }
        else if (x.src.y == '02') { return 'February'; }
        else { return '#NA'; }
    }
});

Morris.Js月名称与JSON数据

1 个答案: