Изменение формата даты в биржевых диаграммах из amchart - PullRequest
Новая
       13

Изменение формата даты в биржевых диаграммах из amchart

0 голосов
/ 11 мая 2018

Я создал биржевую диаграмму из amchart и сохранил ее здесь: jsfiddle

Теперь я хочу изменить (а) формат даты курсора диаграммы на «ДД.ММ.ГГГГ»и (b) формат даты оси категории в немецком формате, например «01. Mai 2018».Я предполагаю, что (a) можно как-то решить с помощью "categoryBalloonDateFormat", но я не смог найти правильное место для его размещения. 

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

К сожалению, это не сработает.

Для (б) я понятия не имею.

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Спасибо - это сработало! Кроме того, если кто-то хочет изменить названия месяцев на другой язык: 

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.'];
0 голосов
/ 11 мая 2018

Для (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), вы должны установить массив categoryAxesSettings.dateFormats таким же образом, как categoryBalloonDateFormats: 

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