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

时间:2018-07-30 03:16:21

标签: javascript amcharts amstock

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

但是我没有设法在我的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",但也没有帮助。

如何启用此字段? enter image description here

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

1 个答案:

答案 0 :(得分:2)

chartCursor中的categoryBalloon要求\n是可见的。在面板中设置categoryAxis可以有效地删除气球,因为您要删除类别轴。

如果您不想使用categoryAxis标签,但想要使用类别气球,请在showCategoryAxis: false中将labelsEnabled设置为false

categoryAxesSettings

Demo

一些有用的说明:

  • AmCharts.makeChart("...", { // ... panels: [{ //showCategoryAxis: false, //comment/remove this // ... }], // ... categoryAxesSettings: { labelsEnabled: false //if you want to remove the axis labels but keep the balloon }, // ... }); 在股票图表的顶层不执行任何操作,并且默认情况下所有股票图表都启用了categoryAxisparseDates在这种情况下是等效的。

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