谷歌图表倾斜文本和最小值不起作用

发布于 2025-01-09 13:58:58 字数 747 浏览 3 评论 0原文

我正在使用谷歌图表。我想在 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);

在此处输入图像描述

I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.

Here is my code:-

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

枫林﹌晚霞¤ 2025-01-16 13:58:58

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

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

参见 --> Material Chart 功能奇偶校验 #2143 的跟踪问题


material 图表 --> google.charts.Bar -- packages:['bar']

核心图表 --> google.visualization.ColumnChart -- packages:['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>

there are many options that simply do not work with material charts, including...

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

see --> Tracking Issue for Material Chart Feature Parity #2143


material chart --> google.charts.Bar -- packages:['bar']

core chart --> google.visualization.ColumnChart -- packages:['corechart']


however, for core charts, there is an option for...

theme: 'material'

see following working snippet...

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>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文