突出显示主要值网格线

时间:2016-12-22 19:35:36

标签: amcharts

我是否缺少突出显示主轴网格线的设置?我嘲笑了我在下面尝试做的一个例子。箭头指向我想要的东西,圆圈显示我拥有的东西。轴值突出显示星期几,但不突出显示网格线。我觉得它也将12 pm作为主轴网格线。

以下是我对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 个答案:

答案 0 :(得分: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