диаграммы Google, изменить метки параметров уравнения линии тренда

Я хочу изменить метку параметров уравнения (только) с Age и Diameter на Y и X с (Age = 4.885 * Diameter + 0.73) на (Y = 4.885 * X + 0.73) в заголовке и внутри всплывающей подсказки.

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').text();
    console.log(equation);
  });

  chart.draw(data, options);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Может кто-то мне помочь, пожалуйста ?


javascript charts google-visualization jsapi pygooglechart
person abdulaziz    schedule 28.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

стандартных опций нет,
вам нужно будет вручную изменить событие 'ready' диаграммы.

но может быть проще изменить метки столбцов на 'X', 'Y',
затем вручную изменить название серии на 'Age'...

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

ИЗМЕНИТЬ

чтобы отображать 'Age' в качестве названия серии во всплывающей подсказке,
вы можете использовать пользовательскую всплывающую подсказку.

здесь представление данных используется для добавления столбца всплывающей подсказки.

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
  calc: function (dt, row) {
    return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
  },
  role: 'tooltip',
  type: 'string'
}]);

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return 'Age\n' + dt.getFormattedValue(row, 0) + ', ' + dt.getFormattedValue(row, 1);
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: {
      alignment: 'end',
      position: 'top'
    },
    series: {
      0: {
        visibleInLegend: true
      }
    },
    trendlines: {
      0: {
        visibleInLegend: true
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ScatterChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var equation = $('text[text-anchor="start"][fill="#222222"]').get(0);
    equation.textContent = 'Age';
  });

  chart.draw(view, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

person WhiteHat    schedule 03.09.2019
comment
Спасибо, я ценю помощь, но мне все еще нужно показать Эпоху при наведении курсора на точечные точки, и я до сих пор не могу понять, как это сделать. - person abdulaziz; 04.09.2019
comment
есть ли способ показать числа в европейском формате? @Белая шляпа - person abdulaziz; 17.09.2019
comment
Вы пытались настроить язык? - person WhiteHat; 17.09.2019