时间戳

首页 > 解决方案 > amcharts 按天和分钟分组

javascript - amcharts 按天和分钟分组

问题描述

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

如果我把它放进去，"groupToPeriods": ["DD"]它将完美地显示它是等 1 年数据的日​​子。

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

天 在此处输入图像描述

分钟 在此处输入图像描述

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

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

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();

标签： javascriptamcharts

解决方案

不，这是不可能的。根据您在期间升序中设置的groupToPeriods任何内容对数据进行分组；maxSeries以默认值为例，首先它以秒 ( ss) 开始，然后是 10 秒 ( 10ss)、30 秒 ( 30ss)、分钟 ( mm)、10 分钟 ( 10mm)、30 分钟 ( 30mm) 然后是天 ( DD)、周 ( WW) , 月 ( MM) 然后年 ( YYYY)。您不能在一个分组中组合多个期间，因此在您的情况下，使用您的极小maxSeries设置，将其设置为您希望根据您的数据分组的最小期间。另请注意，没有NN句点 - 它是mm几分钟。您还需要设置一个合适的minPeriod同样，它也采用单个句点类型，以确保您的数据也正确呈现。

推荐阅读