javascript - Amcharts:更改光标时不显示类别数据

Question

在 Amstock 示例( 1 、 2 )中，我看到在移动光标期间启用了类别字段 block 。

但是我没能在我的 project 中复制这个逻辑。

我的chartCursorSettings如下

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

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

      "panels": [{
        "showCategoryAxis": false,
        "title": "Value",
        "percentHeight": 70,
        "stockGraphs": [
          {
            "id": "g1",
            "valueField": "value",
            "comparable": true,
            "compareField": "value",
            "balloonFunction": this.ballonRender,
            "compareGraphBalloonFunction": this.ballonRender
          }]
      }],

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

      "categoryAxis": {
        "parseDates": true
      },

      "balloon": {
          "fixedPosition": true,
          "maxWidth": 10000
      },

      "chartCursorSettings": {
        "valueBalloonsEnabled": true,
        "categoryBalloonEnabled": true,
        "categoryBalloonAlpha": 0.2,
        "bulletsEnabled": true,
        "bulletSize": 10,
        "categoryBalloonDateFormats": [
            {period:'fff',format:'JJ:NN:SS'},
            {period:'ss',format:'JJ:NN:SS'},
            {period:'mm',format:'JJ:NN'},
            {period:'hh',format:'JJ:NN'},
            {period:'DD',format:'MMM DD'},
            {period:'WW',format:'MMM DD'},
            {period:'MM',format:'MMM'},
            {period:'YYYY',format:'YYYY'}
          ]
      },

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

      "periodSelector": {
        "position": "bottom",
        "periods": [{
          "period": "MM",
          "count": 1,
          "label": "1 month"
        }, {
          "period": "MM",
          "count": 3,
          "label": "3 month"
        }, {
          "period": "MM",
          "count": 6,
          "label": "6 month"
        }, {
          "period": "YYYY",
          "count": 1,
          "label": "1 year"
        }, {
          "period": "YTD",
          "label": "YTD"
        }, {
          "period": "MAX",
          "selected": true,
          "label": "All"
        }]
      },
    });
  },

我还将 parseDates 设置为 true

"categoryAxis": {
  "parseDates": true
},

我尝试指定 "dataDateFormat": "YYYY-MM-DD" 但它也没有帮助我。

如何启用该字段？

我将 JavaScript Date 对象传递给类别字段。

Answer 1

chartCursor 中的categoryBalloon 要求categoryAxis 可见。在面板中设置 showCategoryAxis: false 可有效删除气球，因为您要删除类别轴。

如果您不需要categoryAxis标签但想要类别气球，请在categoryAxesSettings中将labelsEnabled设置为false。

AmCharts.makeChart("...", {
  // ...
  panels: [{
    //showCategoryAxis: false, //comment/remove this
    // ...
  }],
  // ...
  categoryAxesSettings: {
    labelsEnabled: false //if you want to remove the axis labels but keep the balloon
  },
  // ...
});

Demo

一些有用的说明:

• categoryAxis 不会在股票图表的顶层执行任何操作，并且所有股票图表默认启用 parseDates。 categoryAxesSettings 在本例中是等效的。

• dateDateFormat告诉 AmCharts 如何解析 dataProvider 中基于字符串的日期。由于您使用的是 Date 对象，因此这不会执行任何操作。