Google Charts LogScale не работает

1

Я использую Google Charts, чтобы создать гистограмму, и я пытаюсь заставить граф использовать лог-масштаб на вертикальной оси, но он почему-то не работает. Я пробовал использовать logScale и scaleType, но ни один из них не работает.

Вот мой код:

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Vendor', 'Nootropics Depot', 'Pure Nootropics', 'Peak Nootropics', 'Absorb Health'],
    ['ALCAR', 0.07, 0.20, 0.12, 0.24],
    ['Agmatine', 0.13, null, 0.23, null],
    ['Coluracetam', 13.80, 27.49, null, null],
    ['Oxiracetam', 0.47, 0.37, 0.58, 0.63],
    ['Phenibut', 0.22, null, 0.59, 0.60],
    ['Phenylpiracetam', 2.83, 3.33, 5.30, null],
    ['Polygala', 0.42, null, null, null],
    ['Pramiracetam', 1.67, 2.22, 1.60, 2.60],
    ['PRL-8-53', 23.99, null, null, null],
    ['Rhodiola Rosea 3% Rosavins', 0.23, 0.60, 0.32, 0.26],
  ]);

  var formatter = new google.visualization.NumberFormat({
    suffix: 'tablets',
    negativeColor: 'red',
    negativeParens: true
  });
  formatter.format(data, 0);
  var formatter = new google.visualization.NumberFormat({
    prefix: '$',
    negativeColor: 'red',
    negativeParens: true
  });
  formatter.format(data, 1);
  formatter.format(data, 2);
  formatter.format(data, 3);
  formatter.format(data, 4);

  var options = {
    chart: {
      title: 'Cheapest price per gram',
    },
    bars: 'vertical', // Required for Material Bar Charts.
    hAxis: {
      format: 'decimal',
    },
    vAxis: {
      title: 'Price',
      format: '$#',
      minValue: 0.1,
      logScale: true,
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3']
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));

}

Страница JSFiddle: https://jsfiddle.net/rm8vr1p8/

Не совсем уверен, что я делаю неправильно. Я даже пытался изменить значения вертикальной оси, но он просто не работает. Что мне не хватает?

Теги:
graph
charts
google-visualization

1 ответ

0

существует несколько вариантов, которые не поддерживаются диаграммами материалов, в том числе...
{hAxis,vAxis,hAxes.*,vAxes.*}.logScale

см. → Отслеживание проблемы для спецификации материала.


Материал = google.charts.Bar - packages: ['bar']

Классический = google.visualization.ColumnChart - packages: ['corechart']


есть возможность для классических карт выглядеть похожими на Material...
theme: 'material

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Vendor', 'Nootropics Depot', 'Pure Nootropics', 'Peak Nootropics', 'Absorb Health'],
    ['ALCAR', 0.07, 0.20, 0.12, 0.24],
    ['Agmatine', 0.13, null, 0.23, null],
    ['Coluracetam', 13.80, 27.49, null, null],
    ['Oxiracetam', 0.47, 0.37, 0.58, 0.63],
    ['Phenibut', 0.22, null, 0.59, 0.60],
    ['Phenylpiracetam', 2.83, 3.33, 5.30, null],
    ['Polygala', 0.42, null, null, null],
    ['Pramiracetam', 1.67, 2.22, 1.60, 2.60],
    ['PRL-8-53', 23.99, null, null, null],
    ['Rhodiola Rosea 3% Rosavins', 0.23, 0.60, 0.32, 0.26],
  ]);

  var formatter = new google.visualization.NumberFormat({
    suffix: 'tablets',
    negativeColor: 'red',
    negativeParens: true
  });
  formatter.format(data, 0);
  var formatter = new google.visualization.NumberFormat({
    prefix: '$',
    negativeColor: 'red',
    negativeParens: true
  });
  formatter.format(data, 1);
  formatter.format(data, 2);
  formatter.format(data, 3);
  formatter.format(data, 4);

  var options = {
    theme: 'material',
    title: 'Cheapest price per gram',
    hAxis: {
      format: 'decimal'
    },
    vAxis: {
      title: 'Price',
      format: '$#',
      minValue: 0.1,
      logScale: true
    },
    height: 400,
    colors: ['#1b9e77', '#d95f02', '#7570b3']
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
  • 0
    Здорово спасибо Да, я обнаружил, что есть варианты, которые не работают с таблицей материалов, странно. Но перевернутая полоска не выглядит так хорошо, и я думаю, что это может сбить с толку некоторых читателей. Есть ли способ сделать так, чтобы экстремальные значения по-прежнему выделялись при одновременной проверке того, что небольшие значения все еще четко различимы?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню