2016-12-22 5 views
0

Есть ли параметр, который мне не хватает, чтобы выделить основные линии сетки оси? Я издевался над примером того, что я пытаюсь сделать ниже. Стрелки указывают на то, что я хочу, круг показывает, что у меня есть. Значение оси выделяет день недели, но не линию сетки. У меня такое чувство, что он рассматривает линии решетки большой оси в 12 часов.Выделите основные линии сетки

Вот что у меня есть для CategoryAxis:

"categoryAxis" : 
     { 
      "equalSpacing" : true, 
      "minPeriod" : "hh", 
      "parseDates" : true, 
      "fontSize" : 24, 
      "dateFormats" : [ 
      { 
      period : 'fff', 
      format : 'JJ:NN:SS' 
      }, 
      { 
      period : 'ss', 
      format : 'JJ:NN:SS' 
      }, 
      { 
      period : 'mm', 
      format : 'JJ:NN' 
      }, 
      { 
      period : 'hh', 
      format : 'L A' 
      }, 
      { 
      period : 'DD', 
      format : 'MMM DD\n L A' 
      }, 
      { 
      period : 'WW', 
      format : 'MMM DD\n L A' 
      }, 
      { 
      period : 'MM', 
      format : 'MMM DD\n L A' 
      }, 
      { 
      period : 'YYYY', 
      format : 'MMM DD\n L A' 
      }] 
     }, 

enter image description here

ответ

1

Нет, это не параметр, который выделяет эти строки автоматически. Вы можете использовать guide, чтобы выделить эти моменты, рисуя более темную линию.

Как правило, это делается вручную, однако вы можете использовать init событие автоматически делать это, имея его прочитать внутренние даты начала и окончания оси категории и размещая направляющие по мере необходимости:

var chart = AmCharts.makeChart("chartdiv", { 
    // ... 
    "listeners": [{ 
    "event": "init", 
    "method": function(e) { 
     //get the start and end date objects from the categoryAxis' internal data array 
     var startDate = new Date(e.chart.categoryAxis.data[0].category); 
     var endDate = new Date(e.chart.categoryAxis.data[e.chart.categoryAxis.data.length - 1].category); 
     var guides = []; 
     var guideDate; 
     //start at midnight 
     startDate.setHours(0, 0, 0, 0); 
     while (startDate.getTime() <= endDate.getTime()) { 
     guideDate = new Date(startDate); 
     guides.push({ 
      "lineAlpha": 1, 
      "lineColor": "#000", 
      "date": guideDate 
     }); 
     startDate.setDate(startDate.getDate() + 1); 
     } 
     //remove the first guide if it falls outside of the full date range of the axis 
     if (guides[0].date.getTime() < e.chart.categoryAxis.data[0].category.getTime()) { 
     guides.shift(); 
     } 
     e.chart.categoryAxis.guides = guides; 
     e.chart.validateNow(); //draw the guides 
    } 
    }] 
}); 

Demo

+0

Отлично! Это именно то, что я искал! – Jonathan

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