amcharts 按天和分钟分组

Question

我处于人们可以在许多不同时间间隔之间进行选择的情况，例如

1 天（5 分钟数据）
1年（1天数据）

如果我把它放在 "groupToPeriods": ["DD"] 中，当它是 1 年数据时，它会完美地显示天数。

如果我把它放在 "groupToPeriods": ["NN"] 中，当它是等 1 天数据时，它会完美地显示分钟。

天

分钟

如何让它同时与 NN 和 DD 一起工作？我应该根据我提供的数据类型自动输入 NN 还是 DD？在我在那里尝试过的其他示例图表中，情况并非如此，它是自动完成的，但是，那不是股票图表之一，而是普通图表。

我试过这个 "groupToPeriods": ["DD-NN"] 和 "groupToPeriods": ["DD", "NN"] 没有任何运气，here and here 是我阅读的一些关于分组和日期格式的文档。

var redaw = false;
var logarithmic = false;
var interval = "all";

function createChart1(chartData) {
  var chart = AmCharts.makeChart("chartdivs", {
    "type": "stock",
    "theme": "light",
    "recalculateToPercents": "never",
    "dataSets": [{
      "title": "$",
      "fieldMappings": [{
        "fromField": "value",
        "toField": "value"
      }, {
        "fromField": "volume",
        "toField": "volume"
      }],
      "dataProvider": chartData,
      "categoryField": "date",
      "color": "#2e4259",
      "fillAlphas": 0.5
    }],
    "panels": [{
      "title": "Fiat",
      "showCategoryAxis": false,
      "percentHeight": 70,
      "color": "#fff",
      "recalculateToPercents": "never",
      "stockGraphs": [{
        "id": "g1",
        "valueField": "value",
        "comparable": true,
        "lineThickness": "3px",
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>",
        "color": "#fff"
      }]
    }, {
      "title": "Volume",
      "percentHeight": 30,
      "color": "#fff",
      "stockGraphs": [{
        "valueField": "volume",
        "type": "line",
        "showBalloon": false,
        "fillAlphas": 0.5
      }],
      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]",
        "marginRight": 10,
        "color": "#fff"
      }
    }],

    "panelsSettings": {
      //    "color": "#fff",
      "plotAreaBorderAlpha": 0.5,
      "plotAreaBorderColor": "#2e4259",
      "marginLeft": 30,
      "marginRight": 30,
      "marginTop": 5,
      "marginBottom": 30
    },

    "categoryAxesSettings": {
      "equalSpacing": true,
      "gridColor": "#2e4259",
      "gridAlpha": 0.5,
      "maxSeries": 1,
      //////////////////////////////////// HERE IS THE PROBLEM ////////////////////////////////////
      "groupToPeriods": ["DD-NN"]
    },

    "valueAxesSettings": {
      "logarithmic": logarithmic,
      "gridColor": "#2e4259",
      "gridAlpha": 0.5,
      "inside": false,
      "showLastLabel": false
    },
    "chartScrollbarSettings": {
      "graph": "g1",
      //            "graphFillColor": "#000",
      "backgroundColor": "transparent",
      "gridAlpha": 0,
      "graphFillAlpha": 0.8,
      "graphLineAlpha": 0,
      "graphLineColor": "#fff",
      "graphType": "line",
      "updateOnReleaseOnly": false,
      "graphFillColor": "#2e4259",
      "selectedBackgroundColor": "#2e4259",
      "selectedGraphFillAlpha": 0,
      "selectedGraphFillColor": "#2e4259"
    },
    "chartCursorSettings": {
      "valueBalloonsEnabled": true,
      "fullWidth": false,
      "cursorAlpha": 0.5,
      "valueLineBalloonEnabled": false,
      "valueLineEnabled": false,
      "cursorColor": "#000"
    }
  });

  redaw === true ? chart.validateData() : redaw = true;
}

function generateChartData() {
  var chartData1 = [];
  // current date
  var firstDate = new Date();
  // now set 500 minutes back
  firstDate.setMinutes(firstDate.getDate() - 1000);


  var CSRFToken = document.getElementById("CSRFToken").value;
  var parameters = "CSRFToken=" + CSRFToken + "&interval=" + interval + "&id=" + 1;
  console.log("INTERVAL: " + interval);
  ajax("/pages/ajax/request-chart-data.php", parameters, "POST", false, function(results) {
    if (results) {
      var jsonObj = JSON.parse(results);
      console.log("JSON OBJ");
      console.log(jsonObj);
      for (var i in jsonObj) {

        var newDate = new Date(jsonObj[i].date);
        chartData1.push({
          "date": newDate,
          "value": jsonObj[i].price,
          "volume": jsonObj[i].volume
        });
      }
      createChart1(chartData1);
    } else {
      console.log("NO RESULTS");
    }
  });
}
generateChartData();

Answer 1

不，这不可能。 groupToPeriods groups data based on whatever your maxSeries is set to in period ascending order; using the default value as an example, - first it starts with seconds (ss), then 10 seconds (10ss), 30 seconds (30ss), then minutes (mm), 10 minutes (10mm), 30 minutes (30mm) then days (DD), weeks (WW), months (MM) then years (YYYY). You can't combine multiple periods in one grouping, so in your case, with your extremely small maxSeries setting, set it to the smallest period you want to group to based on your data. Also note that there is no NN period - it's mm for minutes. You also need to set an appropriate minPeriod 同样采用单一句点类型，以确保您的数据也能正确呈现。

amcharts 按天和分钟分组

amcharts group by days and minutes

javascript

amcharts