javascript - Amcharts图表光标显示在最后位置

Question

Amcharts:在特定点上强制显示气球。我希望图表光标位于图表中的最后一个日期。

请在图像中查看我的控制台。我生成了错误。

这是 amcharts 文档链接:https://www.amcharts.com/kbase/force-show-balloon-over-specific-data-point/工作样本:http://jsfiddle.net/amcharts/JdTuA/但我做不到。这是我的代码，错误也粘贴在图像中。请指导。

<script>
(function () {
    var chartWeight = AmCharts.makeChart("{{ div }}", {
        "type": "serial",
        "theme": "light",
        "dataProvider": {{ data.json|raw }},
        "creditsPosition": "top-right",
        "synchronizeGrid":false,
        "zoomOutText": "",
        "valueAxes": [
            {
                "id":"v_kg",
                //"title": "Bodyweight in kg",
                //"title": "Körpergewicht in kg",
                "axisColor": "#2A3B55",
                "axisThickness": 0,
                "gridAlpha": 0,
                "offset": 0,
                "axisAlpha": 0,
                "position": "left",
                "labelsEnabled": false,
                "minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
                "maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
                "autoGridCount": false,
                "gridCount": 200,
                "strictMinMax": true
            },
            {
                "id":"v_ratio",
                //"title": "Bodyfat in %",
                //"title": "Körperfett in %",
                "axisColor": "#A46A1F",
                "axisThickness": 0,
                "gridAlpha": 0,
                "offset": 0,
                "axisAlpha": 0,
//                "position": "right",
                "labelsEnabled": false,
                "minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
                "maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
                "autoGridCount": false,
                "gridCount": 200,
                "strictMinMax": true
            },
            {
                "id":"v_lean",
                //"title": "Lean Mass in kg",
                //"title": "Muskelmasse in kg",
                "axisColor": "#80B3FF",
                "axisThickness": 0,
                "gridAlpha": 0,
                "offset": 0,
                "axisAlpha": 0,
//                "position": "right",
                "labelsEnabled": false
            },
        ],
        "graphs": [{
            "valueAxis": "v_kg",
            "lineColor": "#2A3B55",
            "lineThickness": 2,
            "title": "Bodyweight",
            "valueField": "kgBodyweight",
            "fillAlphas": 0,
            "balloonText": "Weight: [[value]]kg",
            "legendValueText": "[[value]]kg",
        }, {
            //"valueAxis": "v_lean",
            "valueAxis": "v_kg",
            "lineColor": "#80B3FF",
            "lineThickness": 2,
            "title": "Lean Mass",
            "valueField": "kgLeanmass",
            "fillAlphas": 0,
            "balloonText": "Lean Mass: [[value]]kg",
            "legendValueText": "[[value]]kg"
        }, {
            "valueAxis": "v_ratio",
            "lineColor": "#A46A1F",
            "lineThickness": 2,
            "title": "Fat",
            "valueField": "ratioBodyfat",
            "fillAlphas": 0,
            "balloonText": "Fat: [[value]]%",
            "legendValueText": "[[value]]%"
        }],
        "chartCursor": {
            "cursorPosition": 'mouse',
            "leaveCursor": true,
            "valueBalloonsEnabled": true,
        },
        "chartScrollbar": {
            "selectedBackgroundColor": "#7F7F7F",
            "backgroundColor": "#e9e9e9",
            "offset": 12,
            "selectedBackgroundAlpha": 1,
            "backgroundAlpha": 1
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "minorGridEnabled": true,
            "startOnAxis": true,
            "gridAlpha": 0.07,
        },
        "export": {
            "enabled": false,
        },
        "legend": {
            "useGraphSettings": true,
        },

    });

    chartCursor = new AmCharts.ChartCursor();

    var date1 = new Date();
    chartCursor.showCursorAt(date1);



    chartWeight.addListener("dataUpdated", function () {
        chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
    });
})();
</script>

Answer 1

您创建的新图表光标对象未附加到图表，这就是它提示未定义的categoryAxis 的原因。将基于 OO 的演示转换为 makeChart/JSON 方法时，您只需直接从图表对象调用该方法，因为 JSON 结构直接映射到图表的内部结构。无需创建新对象，只需调用 yourChartObject.chartCursor.showCursorAt(<your category value here>) 。在这种情况下，您最好在init中执行此操作。事件，以便在调用该方法之前图表将被完全实例化:

AmCharts.makeChart("...", {
  // ...
  "listeners": [{
    "event": "init",
    "method": function(e) {
       e.chart.showCursorAt(/* your date value */);
    }
  }]
})

下面的演示:

(function() {
  var chartWeight = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": getData(),
    "creditsPosition": "top-right",
    "synchronizeGrid": false,
    "zoomOutText": "",
    "valueAxes": [{
        "id": "v_kg",
        //"title": "Bodyweight in kg",
        //"title": "Körpergewicht in kg",
        "axisColor": "#2A3B55",
        "axisThickness": 0,
        "gridAlpha": 0,
        "offset": 0,
        "axisAlpha": 0,
        "position": "left",
        "labelsEnabled": false,
        //  "minimum": {{ 0.99 * data.chartsOptions.all.minKg }},
        //  "maximum": {{ 1.01 * data.chartsOptions.all.maxKg }},
        "autoGridCount": false,
        "gridCount": 200,
        "strictMinMax": true
      },
      {
        "id": "v_ratio",
        //"title": "Bodyfat in %",
        //"title": "Körperfett in %",
        "axisColor": "#A46A1F",
        "axisThickness": 0,
        "gridAlpha": 0,
        "offset": 0,
        "axisAlpha": 0,
        //                "position": "right",
        "labelsEnabled": false,
        //   "minimum": {{ (0.9 * data.chartsOptions.all.minFat)|round(1) }},
        //   "maximum": {{ (1.05 * data.chartsOptions.all.maxFat)|round(1) }},
        "autoGridCount": false,
        "gridCount": 200,
        "strictMinMax": true
      },
      {
        "id": "v_lean",
        //"title": "Lean Mass in kg",
        //"title": "Muskelmasse in kg",
        "axisColor": "#80B3FF",
        "axisThickness": 0,
        "gridAlpha": 0,
        "offset": 0,
        "axisAlpha": 0,
        //                "position": "right",
        "labelsEnabled": false
      },
    ],
    "graphs": [{
      "valueAxis": "v_kg",
      "lineColor": "#2A3B55",
      "lineThickness": 2,
      "title": "Bodyweight",
      "valueField": "kgBodyweight",
      "fillAlphas": 0,
      "balloonText": "Weight: [[value]]kg",
      "legendValueText": "[[value]]kg",
    }, {
      //"valueAxis": "v_lean",
      "valueAxis": "v_kg",
      "lineColor": "#80B3FF",
      "lineThickness": 2,
      "title": "Lean Mass",
      "valueField": "kgLeanmass",
      "fillAlphas": 0,
      "balloonText": "Lean Mass: [[value]]kg",
      "legendValueText": "[[value]]kg"
    }, {
      "valueAxis": "v_ratio",
      "lineColor": "#A46A1F",
      "lineThickness": 2,
      "title": "Fat",
      "valueField": "ratioBodyfat",
      "fillAlphas": 0,
      "balloonText": "Fat: [[value]]%",
      "legendValueText": "[[value]]%"
    }],
    "chartCursor": {
      "cursorPosition": 'mouse',
      "leaveCursor": true,
      "valueBalloonsEnabled": true,
    },
    "chartScrollbar": {
      "selectedBackgroundColor": "#7F7F7F",
      "backgroundColor": "#e9e9e9",
      "offset": 12,
      "selectedBackgroundAlpha": 1,
      "backgroundAlpha": 1
    },
    "categoryField": "date",
    "categoryAxis": {
      "parseDates": true,
      "axisColor": "#DADADA",
      "minorGridEnabled": true,
      "startOnAxis": true,
      "gridAlpha": 0.07,
    },
    "export": {
      "enabled": false,
    },
    "legend": {
      "useGraphSettings": true,
    },
    "listeners": [{
      "event": "init",
      "method": function(e) {
        var date = new Date();
        date.setHours(0, 0, 0, 0);
        date.setDate(date.getDate() - Math.floor(Math.random() * 20))
        e.chart.chartCursor.showCursorAt(date);
      }
    }]

  });



  chartWeight.addListener("dataUpdated", function() {
    chartWeight.zoomToIndexes(chartWeight.dataProvider.length - 60, chartWeight.dataProvider.length);
  });

  function getData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 100);
    firstDate.setHours(0, 0, 0, 0);
    var data = [];
    for (var i = 0; i < 120; ++i) {
      var newDate = new Date(firstDate);
      newDate.setDate(i);
      var dataItem = {
        "date": newDate,
        "kgLeanmass": Math.floor(Math.random() * 20 + 40),
        "kgBodyweight": Math.floor(Math.random() * 20 + 60)
      };
      dataItem.ratioBodyfat = parseFloat((100 * ((dataItem.kgBodyweight - dataItem.kgLeanmass) / dataItem.kgBodyweight)).toFixed(2));
      data.push(dataItem);
    }
    return data;
  }
})();

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>