Question

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

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

如果我将其放在"groupToPeriods": ["DD"]中，它将以等1年数据的形式完美显示日期。

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

天

分钟

如何使其与NN和DD同时使用？是否应该根据提供的数据类型自动输入NN或DD？在我尝试过的其他示例图表中，情况并非如此，它是自动执行的，但是，这不是股票图表之一，而是普通图表。

我尝试"groupToPeriods": ["DD-NN"]和"groupToPeriods": ["DD", "NN"]都没有任何运气，here和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根据您的maxSeries设置为什么，按时段升序对数据进行分组；以默认值为例，-首先以秒（ss）开始，然后以10秒（10ss），30秒（30ss）开始，然后以分钟（{{1} }），10分钟（mm），30分钟（10mm）然后是天（30mm，周（DD），月（WW）年（MM）。您无法将多个期间合并到一个分组中，因此在您的情况下，请使用YYYY极小的设置，将其设置为要根据数据分组的最小期间。另外请注意，没有maxSeries时间段-NN分钟。您还需要设置一个适当的minPeriod，它也需要一个句点类型，以确保您的数据也能正确显示。

amcharts按天和分钟分组

1 个答案: