Question

我正在尝试显示带有某些值的Google折线图。我的最小值是0，最大值是100。我的图形有2条线，而不仅仅是一条线。

我在图表选项中使用curveType：'function'，由于某种原因，在图表中-最小值设置为-100，最大值设置为+200。请运行脚本，然后查看图表左侧的数字-这些是我要询问的值，希望对其进行控制。

我在做什么错了？

这是我的代码：

 <!DOCTYPE html>
<html>
<head>
</head>

<body>
<div id="LineChart"></div>
</body>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

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

// Draw the chart and set the chart values
function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value'); 
    data.addColumn('number', 'Value2');
    data.addRows([
    ['5/21/2019',50,50],
    ['5/21/2019',100,0],
    ['5/21/2019',89,11],
    ['5/21/2019',90,10],
    ['5/21/2019',90,10],
    ['5/22/2019',90,10],
    ['5/22/2019',76,24],
    ['5/23/2019',76,24],
    ['5/23/2019',76,24]  
     ]);

        var Lineoptions = {     
        title: 'Overall success',
        lineWidth: 4,       
        colors: ['#c9e3f4','#ea4c4c'],
          curveType: 'function',
        legend:{position:'none'},       
            fontSize:23,
             hAxis : { 
        textStyle : {
            fontSize: 16 
        }
        },
        vAxis : { 
        textStyle : {
            fontSize: 16 
        },
         minValue:0,
            maxValue:100
    },
    annotations: {
    textStyle: {

   fontSize: 25,
   bold: true,
   italic: false,
   color: '#000000', 
   opacity: 1 
   },
    alwaysOutside: true
    }

    };
    var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
    Linechart.draw(data, Lineoptions);      
    google.visualization.events.addListener(chart7, 'ready', afterDraw);    
    }   
</script>
</html>

Answer 1

不确定minValue和maxValue为什么不起作用。

但是，您可以改用viewWindow ...

  viewWindow: {
    min:0,
    max:100
  }

请参阅以下工作片段...

// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addColumn('number', 'Value2');
  data.addRows([
    ['5/21/2019',50,50],
    ['5/21/2019',100,0],
    ['5/21/2019',89,11],
    ['5/21/2019',90,10],
    ['5/21/2019',90,10],
    ['5/22/2019',90,10],
    ['5/22/2019',76,24],
    ['5/23/2019',76,24],
    ['5/23/2019',76,24]
  ]);

  var Lineoptions = {
    title: 'Overall success',
    lineWidth: 4,
    colors: ['#c9e3f4','#ea4c4c'],
    curveType: 'function',
    legend:{position:'none'},
    fontSize:23,
    hAxis : {
      textStyle : {
        fontSize: 16
      }
    },
    vAxis : {
      textStyle : {
        fontSize: 16
      },
      viewWindow: {
        min:0,
        max:100
      }
    },
    annotations: {
      textStyle: {
        fontSize: 25,
        bold: true,
        italic: false,
        color: '#000000',
        opacity: 1
      },
      alwaysOutside: true
    }
  };
  var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
  Linechart.draw(data, Lineoptions);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></div>

具有curveType的Google折线图：函数更改vAxis值

1 个答案: