我正在使用谷歌图表制作一个条形图,我试图让图表在垂直轴上使用一个日志,但由于某些原因它不起作用。我尝试过使用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/
不确定我做错了什么。我甚至尝试过更改垂直轴的值,但它只是不起作用。我错过了什么?
Material Chart不支持多种选项,包括......
{hAxis,vAxis,hAxes.*,vAxes.*}.logScale
见 - > Tracking Issue for Material Chart Feature Parity
材料= google.charts.Bar
- packages: ['bar']
经典= google.visualization.ColumnChart
- packages: ['corechart']
Classic图表有一个类似于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>