Линейный график Google с curveType: функция изменяет значения vAxis - PullRequest
Новая
       15

Линейный график Google с curveType: функция изменяет значения vAxis

1 голос
/ 23 мая 2019

Я пытаюсь отобразить линейный график 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>

1 Ответ

1 голос
/ 23 мая 2019

не уверен, почему 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>
...