javascript - C3JS的访问值

Question

我有以下图表:

在这种情况下，我想访问 y 轴 ( 11000000 ) 的最大值。 这个值是动态的，所以它可以不同。

我想将这个值保存在一个变量中，这样我就可以在其他地方使用 y 轴的最大值。

我如何访问该轴的 c3js 中的最大值？

当我 console.log(chart.axis.max()); console.log(chart.axis.range());这个值我得到 y2 的值​​但不是来自 y

Object {x: undefined, y: undefined, y2: 100}

这是我的完整代码:

/**
 * @file
 * Provides options for recline visualization.
 */
(function ($) {
  Drupal.behaviors.ckan_graphmapper_chart_elastic = {
    attach: function () {
      var data = Drupal.settings.ckan_graphmapper.data;

      /**
       * Hensbergen
       * @returns {*}
       * @constructor
       */
      function AvHensbergen() {
        var parking = data.parkeren;
        var parking_av_hensbergen = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_av_hensbergen.push(parking[j].A_v_Hensbergen.percentage);
        }

        parking_av_hensbergen.unshift('A. v. Hensbergen');

        return parking_av_hensbergen;
      }

      function AvHensbergenOnDate(res) {
        data = res;

        var parking = data.parkeren;
        var parking_av_hensbergen = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_av_hensbergen.push(parking[j].A_v_Hensbergen.percentage);
        }

        parking_av_hensbergen.unshift('A. v. Hensbergen');

        return parking_av_hensbergen;
      }

      /**
       * Gemeentehuis
       * @returns {*}
       * @constructor
       */

      function Gemeentehuis() {
        var parking = data.parkeren;
        var parking_gemeentehuis = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_gemeentehuis.push(parking[j].Gemeentehuis.percentage);
        }

        parking_gemeentehuis.unshift('Gemeentehuis');

        return parking_gemeentehuis;
      }

      function GemeentehuisOnDate(res) {
        data = res;
        var parking = data.parkeren;
        var parking_gemeentehuis = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_gemeentehuis.push(parking[j].Gemeentehuis.percentage);
        }

        parking_gemeentehuis.unshift('Gemeentehuis');

        return parking_gemeentehuis;
      }

      /**
       * Coornhertpad
       * @returns {*}
       * @constructor
       */

      function Coornhertpad() {
        var parking = data.parkeren;
        var parking_coornhertpad = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_coornhertpad.push(parking[j].Coornhertpad.percentage);
        }

        parking_coornhertpad.unshift('Coornhertpad');
        return parking_coornhertpad;
      }

      function CoornhertpadOnDate(res) {
        data = res;
        var parking = data.parkeren;
        var parking_coornhertpad = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_coornhertpad.push(parking[j].Coornhertpad.percentage);
        }

        parking_coornhertpad.unshift('Coornhertpad');
        return parking_coornhertpad;
      }

      /**
       * Duivenweide
       * @returns {*}
       * @constructor
       */

      function Duivenweide() {
        var parking = data.parkeren;
        var parking_duivenweide = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_duivenweide.push(parking[j].Duivenweide.percentage);
        }

        parking_duivenweide.unshift('Duivenweide');
        return parking_duivenweide;
      }

      function DuivenweideOnDate(res) {
        data = res;
        var parking = data.parkeren;
        var parking_duivenweide = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_duivenweide.push(parking[j].Duivenweide.percentage);
        }

        parking_duivenweide.unshift('Duivenweide');
        return parking_duivenweide;
      }

      /**
       * Tricotage
       * @returns {*}
       * @constructor
       */

      function Tricotage() {
        var parking = data.parkeren;
        var parking_tricotage = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_tricotage.push(parking[j].Tricotage.percentage);
        }

        parking_tricotage.unshift('Tricotage');
        return parking_tricotage;
      }

      function TricotageOnDate(res) {
        data = res;
        var parking = data.parkeren;
        var parking_tricotage = Array();
        for (var j = 0; j < parking.length; j++) {
          parking_tricotage.push(parking[j].Tricotage.percentage);
        }

        parking_tricotage.unshift('Tricotage');
        return parking_tricotage;
      }

      function getPassantenDates() {
        var passers = data.passanten;
        var passers_dates = Array();

        for (var j = 0; j < passers.length; j++) {
          passers_dates.push(passers[j].date);
        }

        passers_dates.unshift('x');

        return passers_dates;
      }

      function getPassantenTotaal() {
        var passers = data.passanten;
        var passers_totaal = Array();

        for (var j = 0; j < passers.length; j++) {
          passers_totaal.push(passers[j].meetpunten.totaal);
        }

        passers_totaal.unshift('passanten');

        return passers_totaal;
      }

      function getPassantenDatesOnDate(res) {
        var data = res;
        var passers = data.passanten;
        var passers_dates = Array();

        for (var j = 0; j < passers.length; j++) {
          passers_dates.push(passers[j].date);
        }

        passers_dates.unshift('x');
        return passers_dates;
      }

      function getPassantenTotaalOnDate(res) {
        var data = res;
        var passers = data.passanten;
        var passers_total = Array();

        for (var j = 0; j < passers.length; j++) {
          passers_total.push(passers[j].meetpunten.totaal);
        }

        passers_total.unshift('passanten');

        return passers_total;
      }

      function generateStarterGraph() {

        var formatX;
        var interval = jQuery('#interval_selector').val();

        switch (interval) {
          case 'day':
            formatX = '%a %Y-%m-%d';
            break;
          case 'month':
            formatX = '%m-%Y';
            break;
          case 'hour':
            formatX = '%a %Y-%m-%d %H';
            break;
          case 'week':
            formatX = '%a %Y-%m-%d';
            break;
        }

        chart = c3.generate({
          bindto: '#chatterplot_elastic',
          data: {
            x: 'x',
            // @todo should be different based on interval selector.
            xFormat: '%Y-%m-%d %H:%M:%S',
            columns: [
              getPassantenTotaal(),
              getPassantenDates(),
              AvHensbergen(),
              Gemeentehuis(),
              Coornhertpad(),
              Duivenweide(),
              Tricotage()
            ],
            axes: {
              'passanten': 'y',
              'time_period': "x",
              'A. v. Hensbergen': 'y2',
              'Gemeentehuis': 'y2',
              'Coornhertpad': 'y2',
              'Duivenweide': 'y2',
              'Tricotage': 'y2'
            },
            types: {
              passanten: 'area-spline',
              'A. v. Hensbergen': 'scatter',
              'Gemeentehuis': 'scatter',
              'Coornhertpad': 'scatter',
              'Duivenweide': 'scatter',
              'Tricotage': 'scatter'
            },
            onclick: function (e) {
              updateGraphMapper(e);
            }
          },
          axis: {
            y2: {
              show: true,
              min: 0,
              max: 100,
              padding: {top: 0, bottom: 0},

            },
            x: {
              type: 'timeseries',
              localtime: false,
              tick: {
                format: formatX,
                culling: {
                  max: 5,
                }
              }
            }
          }
        });
      }


      /**
       * Get the Starter Graph
       */
      generateStarterGraph();
      console.log(chart.axis.max());
      console.log(chart.axis.range());
      /**
       * When a new date is being set
       */
      $(".time-select").bind("change", function () {
        var time_period = $('.time-select option:selected').val();
        var start_date = new Date($("#slider").dateRangeSlider("values").min).toISOString();
        var end_date = new Date($("#slider").dateRangeSlider("values").max).toISOString();

        $.ajax({
          url: Drupal.settings.basePath + Drupal.settings.veenendaal_parkeren.passanten_url,
          type: 'POST',
          data: {
            interval: time_period,
            start: start_date,
            end: end_date
          },
          success: function (res) {
            chart.load({
              bindto: "#chatterplot_elastic",
              x: 'x',
              xFormat: '%Y-%m-%d %H:%M:%S',
              columns: [
                getPassantenTotaalOnDate(res),
                getPassantenDatesOnDate(res),
                AvHensbergenOnDate(res),
                GemeentehuisOnDate(res),
                CoornhertpadOnDate(res),
                DuivenweideOnDate(res),
                TricotageOnDate(res)
              ]
            });
          }
        });
      });

      /**
       * When a new date is being set
       */
      $("#slider").bind("valuesChanged", function (e, data) {
        var start_date = new Date(data.values.min).toISOString();
        var end_date = new Date(data.values.max).toISOString();
        $.ajax({
          url: Drupal.settings.basePath + Drupal.settings.veenendaal_parkeren.passanten_url,
          type: 'POST',
          data: {
            start: start_date,
            end: end_date,
            interval: $('#interval_selector').val()
          },
          success: function (res) {
            updateGraph(
                getPassantenTotaalOnDate(res),
                getPassantenDatesOnDate(res),
                AvHensbergenOnDate(res),
                GemeentehuisOnDate(res),
                CoornhertpadOnDate(res),
                DuivenweideOnDate(res),
                TricotageOnDate(res)
            );
          }
        });

        function updateGraph(yAxis, xAxis, Hensbergen, Gemeentehuis, Coornhertpad, Duivenweide, Tricotage) {
          setTimeout(function () {
            chart.load({
              bindto: "#chatterplot_elastic",
              x: 'x',
              xFormat: '%Y-%m-%d %H:%M:%S',
              columns: [
                yAxis,
                xAxis,
                Hensbergen,
                Gemeentehuis,
                Coornhertpad,
                Duivenweide,
                Tricotage
              ]
            });
          }, 200);
        }
      });
    }

  };
})(jQuery, Drupal);

Answer 1

使用 chart.axis.range() 获取包含 max{x,y,y2} 和 min{x,y,y2} 的对象，如下所示，而不是 chart.axis.max()。