0

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

但是我没有设法在我的项目中复制这个逻辑

我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"但它也没有帮助我。

如何启用此字段？ 在此处输入图像描述

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

4

1 回答 1

2

chartCursor 中的 categoryBalloon 要求它categoryAxis是可见的。showCategoryAxis: false由于您正在删除类别轴，因此在您的面板中设置有效地删除了气球。

如果您不想要 categoryAxis 标签但想要类别气球，labelsEnabled请false在categoryAxesSettings.

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

演示

一些有用的说明：

  • categoryAxis在股票图表的顶层不做任何事情，parseDates默认情况下所有股票图表都已启用。categoryAxesSettings在这种情况下是等价的。

  • dateDateFormat告诉 AmCharts 如何解析dataProvider. 由于您使用的是Date对象，因此这不会做任何事情。

于 2018-07-30T04:23:51.673 回答