第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在3個(gè)不同的谷歌折線圖中可視化數(shù)據(jù)

在3個(gè)不同的谷歌折線圖中可視化數(shù)據(jù)

德瑪西亞99 2022-09-29 10:40:54
大家好,所以我有腳本.js它是從我的數(shù)據(jù)庫(kù)獲取數(shù)據(jù)(讀取.php作為API),并將數(shù)據(jù)存儲(chǔ)在我的索引.html文件的表中。數(shù)據(jù)庫(kù)中的列是:日期、溫度、壓力和 RPM。我現(xiàn)在擁有的是3個(gè)圖表,包括3條線 -->溫度+壓力+rpm。但是我怎么能拆分?jǐn)?shù)據(jù)以在自己的谷歌折線圖中顯示每個(gè)元素。所以我希望有3個(gè)折線圖:1個(gè)溫度圖表+ 1個(gè)壓力圖表+ 1個(gè)rpm圖表。我必須保留1個(gè)包含所有數(shù)據(jù)的表。"use strict";google.charts.load('current', {packages: ['controls', 'line', 'table']});document.getElementById('get').addEventListener('click', getData);async function getData() {  let response = await fetch("http://localhost:8000/read1.php");  let json = await response.json();      var data = new google.visualization.DataTable();  data.addColumn('string', 'date');  data.addColumn('number', 'temperature');  data.addColumn('number', 'pressure');  data.addColumn('number', 'rpm');  for (var i = 0; i < json.length; i++) {      addRow(json[i]);      data.addRow(Object.values(json[i]));    }  var chartTemp = new google.visualization.ChartWrapper({    chartType: 'Line',    containerId: 'temperature_data',    dataTable: data,    options: {      chart: {        title: 'Temperature',        subtitle: ''      },      height: 300    },    view: {      columns: [1 , 2]    }  });  chartTemp.draw();  var chartPres = new google.visualization.ChartWrapper({    chartType: 'Line',    containerId: 'pressure_data',    dataTable: data,    options: {      chart: {        title: 'Pressure',        subtitle: ''      },      height: 300    },    view: {      columns: [1 , 3]    }  });  chartPres.draw();  var chartRPM = new google.visualization.ChartWrapper({    chartType: 'Line',    containerId: 'rpm_data',    dataTable: data,    options: {      chart: {        title: 'RPM',        subtitle: ''      },      height: 300    },    view: {      columns: [1 , 4]    }  });  chartRPM.draw();  var chartTable = new google.visualization.ChartWrapper({    chartType: 'Table',    containerId: 'table_data',    dataTable: data,    options: {}  });  chartTable.draw();}這是我的腳本,目前我有3個(gè)圖表,但它們都顯示3個(gè)元素,我怎么能拆分它?
查看完整描述

1 回答

?
眼眸繁星

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊

建議使用圖表包裝器來(lái)繪制圖表。

谷歌圖表也有一個(gè)表格圖表,所以你可以使用它,而不是手動(dòng)構(gòu)建表格。

表格圖表會(huì)生成一個(gè)普通的 html 表格,因此您可以應(yīng)用當(dāng)前擁有的任何樣式。

加上它有內(nèi)置的排序...


首先,將 和 包添加到 load 語(yǔ)句。'controls''table'


google.charts.load('current', {

  packages: ['controls', 'line', 'table']

}).then(function () {

  document.getElementById('get').addEventListener('click', getData);

});

還建議使用load語(yǔ)句返回的承諾,

以確保Google圖表已加載,在分配點(diǎn)擊事件之前,請(qǐng)參閱上文...


接下來(lái),圖表包裝器有一個(gè)屬性。

這允許您直接在圖表上應(yīng)用視圖。

您可以使用它來(lái)控制圖表中包含數(shù)據(jù)表中的哪些列...view


var chartTemp = new google.visualization.ChartWrapper({

  chartType: 'Line',

  containerId: 'temperature_data',

  dataTable: data,

  options: {

    chart: {

      title: 'Temperature',

      subtitle: ''

    },

    height: 300

  },

  view: {

    columns: [0, 1]  // <-- include x-axis and temperature columns

  }

});

chartTemp.draw();

有關(guān)示例,請(qǐng)參閱以下工作片段...


google.charts.load('current', {

  packages: ['controls', 'line', 'table']

}).then(getData);


function getData() {

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'date');

  data.addColumn('number', 'temperature');

  data.addColumn('number', 'pressure');

  data.addColumn('number', 'rpm');


  for (var i = 0; i < 12; i++) {

    data.addRow([(i + 1) + '/2020', (5 * i), (10 * i), (15 * i)]);

  }


  var chartTemp = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'temperature_data',

    dataTable: data,

    options: {

      chart: {

        title: 'Temperature',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [0, 1]

    }

  });

  chartTemp.draw();


  var chartPres = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'pressure_data',

    dataTable: data,

    options: {

      chart: {

        title: 'Pressure',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [0, 2]

    }

  });

  chartPres.draw();


  var chartRPM = new google.visualization.ChartWrapper({

    chartType: 'Line',

    containerId: 'rpm_data',

    dataTable: data,

    options: {

      chart: {

        title: 'RPM',

        subtitle: ''

      },

      height: 300

    },

    view: {

      columns: [0, 3]

    }

  });

  chartRPM.draw();


  var chartTable = new google.visualization.ChartWrapper({

    chartType: 'Table',

    containerId: 'table_data',

    dataTable: data,

    options: {}

  });

  chartTable.draw();

}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard">

  <div id="temperature_data"></div>

  <div id="pressure_data"></div>

  <div id="rpm_data"></div>

  <div id="table_data"></div>

</div>

編輯


表格圖表應(yīng)使用元素,類似于其他圖表。<div>


嘗試替換以下內(nèi)容...


           <table>

          <thead>

            <tr>

              <th>Date</th>

              <th>Temperature</th>

              <th>Pressure</th>

              <th>RPM</th>

            </tr>

          </thead>

          <tbody id="table_data">

            <tr>

              <td></td>

              <td></td>

              <td></td>

              <td></td>

            </tr>


                <button id="get">GET</button>


          </tbody>

        </table>

跟。。。


<div id="table_data"></div>

<button id="get">GET</button>

至于樣式,不確定它們是如何應(yīng)用的。


如果您在 元素上使用 id...<tbody id="table_data">


#table_data {

  /* styles */

}

然后替換為...


#table_data tbody {

  /* styles */

}


查看完整回答
反對(duì) 回復(fù) 2022-09-29
  • 1 回答
  • 0 關(guān)注
  • 83 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)