Подсказка amCharts отображается только на DateAxis, но не на ValueAxis

Я использую amCharts и делаю диаграмму XY с несколькими сериями, всплывающая подсказка показывает только когда тип оси X DateAxis, но не работает, когда он ValueAxis

var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
series.dataFields.dateX = "time";

amChart с всплывающей подсказкой:

amChart с всплывающей подсказкой

Теперь, когда я меняю эти 2 строки на ось значений, это не работает.

var dateAxis = chart5.xAxes.push(new am4charts.ValueAxis());
    series.dataFields.valueX = "time";

amChart без всплывающей подсказки:

amChart без всплывающей подсказки

Пожалуйста, опубликуйте остальную часть вашего кода, желательно в качестве скрипки или исполняемой демонстрации.   —  person Ahmad Sami    schedule 26.12.2019

См. также:  Альтернативы положительному просмотру назад REGEX при использовании JDE
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 2
  1. Ahmad Sami

    Вот ответ на просьбу опубликовать пример этого (это происходит и со мной) от @xorspark:

    Диаграмма XY, ось Y — ValueAxis, ось X — CategoryAxis …. и всплывающая подсказка работает: https://codepen.io/alavigne314/pen/JjozVWx

    Та же диаграмма XY, но ось X изменена с CategoryAxis на ValueAxis … и всплывающая подсказка исчезла: https://codepen.io/alavigne314/pen/povYBdp

    Разница между ними составляет всего 3 строки:

    var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    theXAxis.dataFields.category = "xValue";
    

    меняется на

    var theXAxis = chart.xAxes.push(new am4charts.ValueAxis());
    

    а также

    series1.dataFields.categoryX = "xValue";
    

    меняется на

    series1.dataFields.valueX = "xValue";
    

    Может, мы оба неправильно что-то читаем в документации? Если так, то я не могу узнать, что это. Или, возможно … всплывающие подсказки не работают или не поддерживаются на диаграмме X-и-Y-ValueAxis?

  2. Ahmad Sami

    Я столкнулся с той же проблемой и покопался в код библиотеки, я понял, что ValueAxis не реализует getSeriesDataItem (DateAxis и CategoryAxis do). Итак, решение для меня было реализовать этот метод. Исходя из других реализаций оси, я получил следующий код:

    am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) {
        var key = this.axisFieldName + this.axisLetter;
        var value = this.positionToValue(position);
        return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
            return x[key];
        }, "any"));
    }
    

    После добавления этого прототипа всплывающие подсказки работают без проблем при использовании ValueAxis:

    /********** FIX: Add getSeriesDataItem method to ValueAxis ************/
    am4charts.ValueAxis.prototype.getSeriesDataItem = function (series, position) {
        var key = this.axisFieldName + this.axisLetter;
        var value = this.positionToValue(position);
        return series.dataItems.getIndex(series.dataItems.findClosestIndex(value, function(x) {
            return x[key];
        }, "any"));
    }
    /**********************************************************************/
    /* Create chart instance */
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    
    /* Add data */
    chart.data = [{
      "xValue": 1000,
      "yValue": 1587
    }, {
      "xValue": 1100,
      "yValue": 1567
    }, {
      "xValue": 1250,
      "yValue": 1617
    }, {
      "xValue": 1400,
      "yValue": 1630
    }, {
      "xValue": 1700,
      "yValue": 1660
    }, {
      "xValue": 1754,
      "yValue": 1683
    }, {
      "xValue": 2255,
      "yValue": 1691
    }, {
      "xValue": 3004,
      "yValue": 1298
    }];
    
    /* Create axes */
    var theXAxis = chart.xAxes.push(new am4charts.ValueAxis());
    
    /* Create value axis */
    var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
    
    /* Create series */
    var series1 = chart.series.push(new am4charts.LineSeries());
    series1.dataFields.valueY = "yValue";
    series1.dataFields.valueX = "xValue";
    series1.name = "The X Axis";
    series1.bullets.push(new am4charts.CircleBullet());
    series1.tooltipText = "{valueY}";
    
    /* Add legend */
    chart.legend = new am4charts.Legend();
    
    /* Create a cursor */
    chart.cursor = new am4charts.XYCursor();
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    
    #chartdiv {
      width: 100%;
      height: 300px;
    }
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <div id="chartdiv"></div>

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: