Question

我从amchart创建了一个stockchart并将其保存在此处：jsfiddle

现在我想将（a）图表光标的日期格式更改为＆＃34; DD.MM.YYYY＆＃34; （b）类别轴到德国格式的日期格式，例如＆＃34; 01。 Mai 2018＆＃34;。我假设（a）可以通过＆＃34; categoryBalloonDateFormat＆＃34;以某种方式解决，但我无法找到正确的位置。

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

不幸的是，这不起作用。

对于（b）我完全没有任何线索。

Answer 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"}
]

演示：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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.'];

从amchart更改stockcharts中的dateformat

2 个答案: