Google Charts Axis Percentage

时间:2015-07-07 17:00:18

标签: google-visualization

https://jsfiddle.net/vko75dg4/

我希望将这个数字作为%,但它不适合我。我还想摆脱将鼠标悬停在图表上的日期旁边的时间。

有什么想法吗?感谢。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="https://www.google.com/jsapi"></script>


<script type='text/javascript'>//<![CDATA[ 

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Test 1');
  data.addColumn('number', 'Product 1');
  data.addColumn('number', 'Product 2');
  data.addColumn('number', 'Product 3');      

  data.addRows([



  [new Date(2015, 01, 1),  73, 88, 96, 79],[new Date(2015, 02, 1),  100, 75, 86, 90],[new Date(2015, 03, 1),  76, 95, 93, 86],[new Date(2015, 04, 1),  95, 75, 100, 98],[new Date(2015, 05, 1),  91, 31, 88, 85],[new Date(2015, 06, 1),  90, 74, 72, 79],[new Date(2015, 07, 1),  95, 80, 90, 78],      ]);

  var options = {
    chart: {
      title: 'test',
      subtitle: '',
    },
    width: 1300,
    height: 600,
    vAxis: { format: 'percent' }



  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
  }
//]]>  

</script>


</head>
<body>


<div id="linechart_material"></div>

 </body>


 </html>

1 个答案:

答案 0 :(得分:0)

阅读Line Chart documentation,您可以告诉您需要使用chart.draw(data, google.charts.Line.convertOptions(options));代替chart.draw(data, options);

使用%后缀会导致一些不需要的格式化,但它会使您的数据变为100,但您可以先将数据除以100。