ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-谷歌图表slantedText和最小值不起作用

2019-10-26 09:45:27  阅读:239  来源: 互联网

标签:charts google-visualization javascript


我正在使用谷歌图表.我想在x轴上显示文字,并且在y轴上的最小值应为0.经过一些谷歌我把一些代码片段不起作用.

这是我的代码:

var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
 var options = {
   hAxis: {
     title: "Month",
     textPosition: 'out',
     slantedText: true,
      slantedTextAngle: 90
  },
  vAxis: {
    title: 'Revenue',
    minValue: 0,
    viewWindow: { min: 0 },
    format: '0',
  },
  height: 260,
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));

chart.draw(data, options);

enter image description here

解决方法:

有很多选项根本不适用于材料图表,包括…

{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue

看到-> Tracking Issue for Material Chart Feature Parity #2143

物料表-> google.charts.Bar-包:[‘bar’]

核心图表-> google.visualization.ColumnChart-包:[‘corechart’]

但是,对于核心图表,可以选择…

主题:“材料”

请参阅以下工作片段…

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

function drawChart() {
  var loadDaysLeadGraphData = [
    ['Year', 'Value'],
    ['2005',  58],
    ['2006',  63],
    ['2007',  66],
    ['2008',  66],
    ['2009',  81],
    ['2010',  85],
    ['2011',  86],
    ['2012',  86],
    ['2013',  89],
    ['2014',  90],
    ['2015',  90]
  ];

  var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
   var options = {
     hAxis: {
       title: "Month",
       textPosition: 'out',
       slantedText: true,
        slantedTextAngle: 90
    },
    vAxis: {
      title: 'Revenue',
      minValue: 0,
      viewWindow: { min: 0 },
      format: '0',
    },
    height: 260,
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
    theme: 'material'
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>

标签:charts,google-visualization,javascript
来源: https://codeday.me/bug/20191026/1935774.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有