从 amchart 更改股票图表中的日期格式答案

【问题标题】：Changing dateformat in stockcharts from amchart从 amchart 更改股票图表中的日期格式
【发布时间】：2018-05-11 16:12:24
【问题描述】：

我从 amchart 创建了一个股票图表并将其保存在这里：jsfiddle

现在我想将 (a) 图表光标的日期格式更改为“DD.MM.YYYY”和 (b) 将类别轴的日期格式更改为德语格式，例如“01. 麦 2018”。我认为（a）可以通过“categoryBalloonDateFormat”以某种方式解决，但我无法找到正确的放置位置。

chart.ChartCursor.categoryBalloonDateFormat = "DD.MM.YYYY";

很遗憾，这不起作用。

对于（b）我一点头绪都没有。

【问题讨论】：

标签： charts date-format amcharts stock

【解决方案1】：

对于 (a)，您必须将其设置在 chartCursorSettings.categoryBalloonDateFormats 数组中，用于图表中表示的所需时间段。如果您的数据是每天，至少设置 DD 和 WW 周期（每天和每周），但根据数据量，您可能还需要设置 MM（每月）周期。例如：

chart.chartCursorSettings.categoryBalloonDateFormats = [
  {period:"YYYY", format:"YYYY"},
  {period:"MM", format:"MMM, YYYY"},
  {period:"WW", format:"DD.MM.YYYY"},
  {period:"DD", format:"DD.MM.YYYY"}, 
  {period:"hh", format:"JJ:NN"},
  {period:"mm", format:"JJ:NN"},
  {period:"ss", format:"JJ:NN:SS"},
  {period:"fff", format:"JJ:NN:SS"}
]

对于 (b) 类似，您必须以与 categoryBalloonDateFormats 相同的方式设置 categoryAxesSettings.dateFormats 数组：

chart.categoryAxesSettings.dateFormats = [
  {period:"YYYY", format:"YYYY"},
  {period:"MM", format:"MMM, YYYY"},
  {period:"WW", format:"DD.MM.YYYY"},
  {period:"DD", format:"DD.MM.YYYY"}, 
  {period:"hh", format:"JJ:NN"},
  {period:"mm", format:"JJ:NN"},
  {period:"ss", format:"JJ:NN:SS"},
  {period:"fff", format:"JJ:NN:SS"}
]

演示：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",

  "categoryAxesSettings": {
    "dateFormats": [{
        period: "YYYY",
        format: "YYYY"
      },
      {
        period: "MM",
        format: "DD.MM.YYYY"
      },
      {
        period: "WW",
        format: "DD.MM.YYYY"
      },
      {
        period: "DD",
        format: "DD.MM.YYYY"
      },
      {
        period: "hh",
        format: "JJ:NN"
      },
      {
        period: "mm",
        format: "JJ:NN"
      },
      {
        period: "ss",
        format: "JJ:NN:SS"
      },
      {
        period: "fff",
        format: "JJ:NN:SS"
      }
    ]
  },

  "chartCursorSettings": {
    "categoryBalloonDateFormats": [{
        period: "YYYY",
        format: "YYYY"
      },
      {
        period: "MM",
        format: "DD.MM.YYYY"
      },
      {
        period: "WW",
        format: "DD.MM.YYYY"
      },
      {
        period: "DD",
        format: "DD.MM.YYYY"
      },
      {
        period: "hh",
        format: "JJ:NN"
      },
      {
        period: "mm",
        format: "JJ:NN"
      },
      {
        period: "ss",
        format: "JJ:NN:SS"
      },
      {
        period: "fff",
        format: "JJ:NN:SS"
      }
    ],
    "valueBalloonsEnabled": true
  },

  "dataSets": [{
    "fieldMappings": [{
      "fromField": "value",
      "toField": "value"
    }],

    "dataProvider": generateChartData(),
    "categoryField": "date"
  }],

  "panels": [{
    "stockGraphs": [{
      "valueField": "value",
      "type": "smoothedLine"
    }]
  }]
});


function generateChartData() {
  var chartData = [];
  var firstDate = new Date(2012, 0, 1);
  firstDate.setDate(firstDate.getDate() - 1000);
  firstDate.setHours(0, 0, 0, 0);

  for (var i = 0; i < 30; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(i);

    var a = Math.round(Math.random() * (40 + i)) + 100 + i;

    chartData.push({
      date: newDate,
      value: a
    });
  }
  return chartData;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

【讨论】：

【解决方案2】：

谢谢 - 成功了！此外，如果有人想将月份名称更改为另一种语言：

AmCharts.monthNames = [
              'Januar',
              'Februar',
              'März',
              'April',
              'Mai',
              'Juni',
              'Juli',
              'August',
              'September',
              'Oktober',
              'November',
              'Dezember'];
            AmCharts.shortMonthNames = [
              'Jan.',
              'Feb.',
              'März',
              'April',
              'Mai',
              'Juni',
              'Juli',
              'Aug.',
              'Sept.',
              'Okt.',
              'Nov.',
              'Dez.'];

【讨论】：