Amcharts：更改光标时不显示类别数据答案

【问题标题】：Amcharts: category data is not shown while changing the cursorAmcharts：更改光标时不显示类别数据
【发布时间】：2018-07-30 03:16:20
【问题描述】：

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

但是我没有设法在我的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 对象传递给类别字段。

【问题讨论】：

我在您的沙盒链接中看不到任何 AmCharts 代码。您可以实际发布完整的 makeChart 代码或修改您的沙箱代码，以便我们真正看到您的图表吗？只要设置在图表对象的顶层并设置为chartCursorSettings 对象的一部分，您的问题中的设置就应该起作用，not categoryCursorSettings.
@xorspark hm，从我的角度来看，它工作正常。无论如何，AmChart 组件 (amcandlestick.vue) 在 `src->components->widgets 中。请检查一下这个文件是否存在？
@xorspark 我也更新了代码

标签： javascript amcharts amstock

【解决方案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 对象，因此这没有任何作用。

【讨论】：