Question

任何人都知道如何将我的InnerText按钮连接到Google Chart积分？我建立了10个按钮，并希望将它们转换为数组，然后将其链接到谷歌图表点。链接下面是实际的整体代码：

How to link buttons to google chart points?

请帮助我，

非常感谢你提前

/// <-- Load google charts --> ///
google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(qi_drawChart);

// Draw the Quality Internal Chart
function qi_drawChart() {
  var qi_data = google.visualization.arrayToDataTable([
  ['Day', 'PPM'],
  ['5', 30000], //How to connect this ? 
  ['10', 20000], //How to connect this ? 
  ['15', 20000], //How to conect this ? 
  ['20', 19000], //How to connect this ? 
  ['25', 20000], //How to connect this ? 
]);
  // Optional; add a title and set the width and height of the chart
  var qi_options = {
    title:'Internal PPM', 
    width:221, 
    height:265,
    pointSize: 3,
    lineWidth: 1,
    hAxis: {title: '', minValue: 0, maxValue: 31, textStyle:{fontSize:8}},
    vAxis: {title: '', minValue: 0, maxValue: 50000, textStyle:{fontSize:8}, format: 'short'},
    backgroundColor: '#E4E4E4', 
    legend: {position: 'none'}
  };
  // Display the chart inside the <div> element with id="piechart"
  var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));
  qi_chart.draw(qi_data, qi_options);
}

Answer 1

要更改图表，您必须更改数据并重新绘制

更改数据，使用图表方法 - ＆gt; setValue(rowIndex, colIndex, value);

该方法需要三个参数...
rowIndex - 使用按钮的值 - 1
colIndex - 在此示例中，始终为1 value - 用户输入的值

请参阅以下工作代码段中的函数getValue

function getValue(sender) {
  // get row index
  var rowIndex = sender.target.value - 1;

  // get existing value
  var value = qi_data.getValue(rowIndex, 1);

  // prompt for new value
  var newValue = window.prompt('Enter the value:', value);

  // update value
  qi_data.setValue(rowIndex, 1, newValue);

  // draw the chart
  drawChart();
}

最小的例子......

＆＃13;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));

  var qi_data = google.visualization.arrayToDataTable([
    ['Day', 'PPM'],
    ['5', 30000], //How to connect this ?
    ['10', 20000], //How to connect this ?
    ['15', 20000], //How to conect this ?
    ['20', 19000], //How to connect this ?
    ['25', 20000], //How to connect this ?
  ]);

  var qi_options = {
    title: 'Internal PPM',
    width: 221,
    height: 265,
    pointSize: 3,
    lineWidth: 1,
    hAxis: {title: '', minValue: 0, maxValue: 31, textStyle: {fontSize:8}},
    vAxis: {title: '', minValue: 0, maxValue: 50000, textStyle: {fontSize:8}, format: 'short'},
    backgroundColor: '#E4E4E4',
    legend: {position: 'none'}
  };

  for (var i = 0; i < qi_data.getNumberOfRows(); i++) {
    var button = document.getElementById('btn-select-' + (i + 1));
    button.addEventListener('click', getValue, false);
    button.name = i;
  }

  function getValue(sender) {
    var rowIndex = parseInt(sender.target.name);
    var value = qi_data.getValue(rowIndex, 1);
    var newValue = window.prompt('Enter the value:', value);
    sender.target.value = newValue;
    qi_data.setValue(rowIndex, 1, newValue);
    drawChart();
  }

  drawChart();
  function drawChart() {
    qi_chart.draw(qi_data, qi_options);
  }
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="btn-select-1" type="button" value="1" />
<input id="btn-select-2" type="button" value="2" />
<input id="btn-select-3" type="button" value="3" />
<input id="btn-select-4" type="button" value="4" />
<input id="btn-select-5" type="button" value="5" />
<div id="qi_chart"></div>

＆＃13;

Answer 2

在这里我怎么说，但我仍然不知道如何从我的模态而不是窗口提示中提示它。

＆＃13;

// Get the modal
var modal = document.getElementById('myModal_qi');
// Get the button that opens the modal
var QualityIntbtns = document.querySelectorAll('.QualityIntbtn button');
// target value
var QiTV = document.getElementById('inputtargetqi');
// Each button click => open modal 
for (var i = 0; i < QualityIntbtns.length; i++) {
  QualityIntbtns[i].onclick = function() {
    QiTV.setAttribute('startbtn', this.id);
    modal.style.display = "block";
  }
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(qi_event) {
  if (qi_event.target == modal) {
    modal.style.display = "none";
  }
});

//Arithematic Operator Control
function qicheckValue() {
  var inputvalue = document.getElementById('modalvalue');
  var buttonsubmit = document.getElementById(QiTV.getAttribute('startbtn'));
  var value = parseInt(inputvalue.value);
  var targetValue = parseInt(QiTV.value);

  if (value < targetValue) {
    buttonsubmit.style.background = 'rgb(255, 0, 0)';
    buttonsubmit.innerText = value;
  } else if (value >= targetValue) {
    buttonsubmit.style.background = 'rgb(60, 179, 113)';
    buttonsubmit.innerText = value;
  } else {
    buttonsubmit.style.background = '';
    buttonsubmit.innerText = ''
  }
  modal.style.display = "none";
  return false;
}

/// <-- Load google charts --> ///
/// Quality Internal Chart
google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));

  var qi_data = google.visualization.arrayToDataTable([
    ['Day', 'PPM'],
    ['1', 30000],
    ['2', 30000],
    ['3', 30000],
    ['4', 30000],
    ['5', 30000],
    ['6', 30000],
    ['7', 30000],
    ['8', 30000],
    ['9', 30000],
    ['10', 30000],
    ['11', 30000],
    ['12', 20000],
    ['13', 20000],
    ['14', 20000],
    ['15', 20000],
    ['16', 20000],
    ['17', 20000],
    ['18', 20000],
    ['19', 20000],
    ['20', 20000],
    ['21', 24000],
    ['22', 24000],
    ['23', 24000],
    ['24', 24000],
    ['25', 24000],
    ['26', 24000],
    ['27', 24000],
    ['28', 24000],
    ['29', 24000],
    ['29', 24000],
    ['30', 24000],
    ['31', 24000],
  ]);
  // Optional; add a title and set the width and height of the chart
  var qi_options = {
    title: 'Internal PPM',
    width: 221,
    height: 265,
    pointSize: 3,
    lineWidth: 1,
    hAxis: {
      title: '',
      minValue: 0,
      maxValue: 31,
      textStyle: {
        fontSize: 8
      }
    },
    vAxis: {
      title: '',
      minValue: 0,
      maxValue: 50000,
      textStyle: {
        fontSize: 8
      },
      format: 'short'
    },
    backgroundColor: '#E4E4E4',
    legend: {
      position: 'none'
    }
  };

  for (var i = 0; i < qi_data.getNumberOfRows(); i++) {
    var button = document.getElementById('qi' + (i + 1));
    button.addEventListener('click', getValue, false);
  }

  function getValue(sender) {
    var rowIndex = parseInt(sender.target.name);
    var value = qi_data.getValue(rowIndex, 1);
    var newValue = window.prompt('Enter the value:', value);
    sender.target.value = newValue;
    qi_data.setValue(rowIndex, 1, newValue);
    drawChart();
  }

  drawChart();

  function drawChart() {
    qi_chart.draw(qi_data, qi_options);
  }
});

// Display the chart inside the <div> element with id="qi_chart"
var qi_chart = new google.visualization.ComboChart(document.getElementById('qi_chart'));
qi_chart.draw(qi_data, qi_options);
}

＆＃13;

.QualityIntbtn {
  border: 1px solid blue;
  ;
  height: 265px;
  Width: 221px;
  display: inline-block;
}

.AllButtons button {
  height: 24px;
  width: 30px;
  font-family: Arial;
  font-weight: bold;
  font-size: 9px;
  padding: 1px;
  border: 0.5px ridge black;
}

.modal_qi {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

#inputtargetqi {
  height: 22px;
  width: 55px;
  font-size: 0.75rem;
  text-align: center;
  border: 0.5px ridge black;
}


/* Modal Content/Box */

.qi_modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 240px;
  height: 200px;
}

.LineChart {
  border: 1px solid black;
  background-color: lightgrey;
  height: 265px;
  Width: 221px;
  display: inline-block;
  text-align: center;
}

＆＃13;

<html>

<body>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <section class=AllButtons>
    <div style="position:relative; top:5px" class=QualityIntbtn>
      <button id="qi1" style="position:absolute; left:66px; top:40px">1</button>
      <button id="qi2" style="position:absolute; left:96px; top:40px">2</button>
      <button id="qi3" style="position:absolute; left:126px; top:40px">3</button>
      <button id="qi4" style="position:absolute; left:36px; top:64px">4</button>
      <button id="qi5" style="position:absolute; left:66px; top:64px">5</button>

      <input id="inputtargetqi" class=numberonly value=0 type="number" min="0" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style="position:absolute; left:85px; top:115px">

    </div>
  </section>

  <div id=qi_chart class=LineChart></div>

  <!-- The Modal Box Quality Internal -->
  <div id="myModal_qi" class="modal_qi">

    <!-- Modal content -->
    <div class="qi_modal-content">
      <span class="qi_close">&times;</span>
      <p>PLEASE INPUT QUANTITY</p>
      <input id="modalvalue" type="number" ondrop="return false;" onpaste="return false;" onkeypress='return event.charCode>=48 && event.charCode<=57' ; style=font-size:20px autofocus>
      <br>
      <br>
      <button id="submit" class=submit_on_enter onclick="return qicheckValue()">SUBMIT</button>
    </div>

</body>

</html>

＆＃13;

将Button InnerText连接到Google Chart Points

2 个答案: