Несколько всплывающих подсказок Amcharts (баллон) на одном графике в режиме сравнения

У меня есть 4 биржевых графика, которые я хочу сравнить. Когда я пытался установить для них свойства ballon, я всегда получал какие-то избыточные.

Моя первая идея состояла в том, чтобы указать только один StockGraph Но я получаю один дополнительный объект.

 let chart = window.AmCharts.makeChart("chartdiv", {
          "path": AmCharts_path,
          "type": "stock",
          "theme": "light",

          "dataSets": portfolioData.map(function (port) {
            return {
              "title": port.name,
              "fieldMappings": [{
                "fromField": "value",
                "toField": "value"
              }],
              "dataProvider": port.data,
              "compared": true,
              "categoryField": "date"
            }
          }),

          "panels": [{
            "showCategoryAxis": false,
            "title": "Value",
            "percentHeight": 70,
            "stockGraphs": [
              {
                "id": "g1",
                "valueField": "value",
                "comparable": true,
                "compareField": "value",
                "balloonText": "Smart Gloabal A-[[title]]:<b>[[value]]</b>",
              }
             ]
          }],

          "chartScrollbarSettings": {
            "graph": "g1"
          },

          "chartCursorSettings": {
            "valueBalloonsEnabled": true,
            "fullWidth": true,
            "cursorAlpha": 0.1,
            "valueLineBalloonEnabled": true,
            "valueLineEnabled": true,
            "valueLineAlpha": 0.5
          },

          "listeners": [{
            "event": "zoomed",
            "method": this.calulateMetrics
          }],

Затем я решил удалить свойство ballonText. Но все же этот дополнительный объект существует.

        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            //"balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
         ]

Потом я решил описать логику для каждого графа, но это только увеличило количество моих объектов.

        "stockGraphs": portfolioData.map(function (port, idx) {
          return {
           "id": "g"+(idx+1),
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonText": "A-[[title]]:<b>[[value]]</b>",
            "compareGraphBalloonText": "B [[title]]:<b>[[value]]</b>"
          }
        }),

Я пытался следовать примерам на официальном сайте, но не нашел подходящего.


javascript amcharts amstock
person Daniel Chepenko    schedule 26.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Дополнительный шар на первом снимке экрана связан с вашим первым dataSet объектом. Первый dataSet виден по умолчанию, поэтому для него не нужно устанавливать compared в значение true; установка значения true приведет к дублированию балуна из первого dataSet (вы можете увидеть, как первый dataSet повторяется в легенде, если он включен). Вы можете исправить это, немного изменив вызов map:

      "dataSets": portfolioData.map(function (port, idx) {
        return {
          "title": port.name,
          "fieldMappings": [{
            "fromField": "value",
            "toField": "value"
          }],
          "dataProvider": port.data,
          "compared": (idx === 0 ? false : true), //don't compare the first dataSet
          "categoryField": "date"
        }
      }),
person xorspark    schedule 26.07.2018