google charts 和百度echarts对比 google charts

本文旨在提供Google Charts的定制化教程，内容涉及如何优化日期显示格式、建立图表的水平轴方向，以及对数据系列进行数值缩放（例如将风速除以10）。通过修改图表选项和数据准备逻辑，您可以使Google Charts更符合的特定数据需求展示，提升图表的一致性和专业性。Google Charts定制化指南

google图表是一个功能强大的javascript库，用于在网页上创建各种交互式图表。然而，默认的图表样式和行为可能无法完全满足所有需求。本教程将详细介绍如何对google图表进行常见且实用的定制，包括日期格式化、坐标轴方向调整以及数据图表。1. 准备工作与基础图表结构

在进行任何定制之前，确保您已经加载了Google Charts库并设置了基础图表结构。

以下是典型的 HTML 和 JavaScript 代码片段，用于创建一个简单的折线图：lt；div id=quot；curve_chartquot； style=quot；宽度： 900px；高度： 500px；quot；gt；lt；/divgt；lt；script type=quot；text/javascriptquot； src=quot；https://www.gstatic.com/charts/loader.jsquot；gt；lt；/scriptgt；lt；script type=quot；text/javascriptquot；gt； google.charts.load('current'， {'packages'：['corechart']})； google.charts.setOnLoadCallback(drawChart)； // 将函数改为更通用的drawChart function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date'， 'Temperature'， 'Wind Speed'， '湿度']， // 列标题 lt；?php // PHP 数据查询与输出 $chartQuery = quot；SELECT Date， TmpExt， Vents， HumExt FROM ZiMeteo ORDER BY ID DESC LIMIT 144quot；； $chartQueryRecords = mysqli_query($connect， $chartQuery)； while ($row = mysqli_fetch_assoc($chartQueryRecords)) { echo quot；['quot；.$row['Date'].quot；'，quot；.$row['TmpExt'].quot；，quot；.$row['Vents'].quot；，quot；.$row['HumExt'].quot；]，quot；； } ?gt； ])； var options = { title： '24小时变形趋势'， legend： {position： 'bottom' }， //其他定制选项将在此处添加 }； var Chart = new google.visualization.LineChart(document.getElementById('curve_chart'))；chart.draw(data，options)；}lt；/scriptgt；登录后复制

注意事项：drawChart函数是google.charts.setOnLoadCallback的回调函数，确保在库加载完成后执行。PHP代码负责从数据库中获取数据并将其格式化为JavaScript数组的字符串表示。

2.优化日期显示格式

默认情况下，Google Charts有时会尝试智能地解析和显示日期。但是，我们需要更具体、更易读的日期格式。这通过可以修改hAxis（水平轴）的格式选项来实现。

修改方案：在options对象中，添加或修改hAxis配置。首先，确保您的数据能够被Google Charts正确识别为日期类型。如果PHP输出是字符串，Google图表通常可以解析常见的日期字符串格式（如'YYYY-MM-DD HH：MM：SS'）。var options = { title： '24小时演变趋势'， legend： {position： 'bottom' }， hAxis： { title： '时间'， format： 'MM-dd HH：mm'， // 输出：显示月日时：分 textStyle： { color： '#333' // 可选：设置轴标签颜色 } }， vAxis： { title： '数值'， textStyle： { color： '#333' // 可选：设置轴标签颜色 } }}；登录后复制

常用日期格式字符串：'yyyy-MM-dd'：年-月-日'HH：mm'：时：分'MM-dd HH：mm'：月-日 时：分'MMM dd， yyyy'：例如 "Jan 01， 2023"'short'：简短日期格式'medium'：中等日期格式'long'：长日期格式

高级提示：如果您的日期字符串格式不规范，或者需要更精确的日期处理，建议在JavaScript中将字符串转换为Date对象。例如：//假设PHP输出的日期是'YYYY-MM-DD HH：MM：SS'//之前可以在arrayToDataTable对数据进行重新var rawData = [ ['日期'，'温度'，'风速'，'湿度']， lt；?php /* ... PHP 输出... */ ?gt；]；varprocessedData = rawData.map((row，index)=gt；{ if (index === 0) return row； // 跳过标题行 const dateString = row[0]； // 假设日期字符串为 'YYYY-MM-DD HH：MM：SS' // 可以根据实际格式调整解析逻辑 const date = new Date(dateString.replace(/-/g， '/'))； // 兼容性处理 return [date， row[1]， row[2]， row[3]]；})；var data = google.visualization.arrayToDataTable(processedData)；登录后复制3. 碳水化合物图表水平轴方向

在某些情况下，您可能希望图表的水平轴（通常是时间轴）从右向左而不是从左向右显示数据。Google Charts 提供了 hAxis.direction 选项来实现此功能。

Glif

Glif.app是一个有趣的AI沙盒工具，用于创建名为glifs的微型AI生成器，例如自拍生成器、Meme梗图、表情包、漫画、故事等124查看详情

修改方案：在options对象的hAxis配置中，设置方向：-1。var options = { title： '24小时演变趋势'， legend： {position： 'bottom' }， hAxis： { title： '时间'， format： 'MM-dd HH：mm'， Direction： -1， // 设置水平轴方向为逆向 textStyle： { color： 'white' // 示例：将轴标签颜色设为白色 } }， vAxis： { title： '数值'， textStyle： { color： 'white' // 输出：将轴标签颜色设为白色 } }}；登录后复制

解释：direction： 1是默认值，表示从左到右。方向： -1表示从右到左。4. 对数据系列进行数值缩放

如果某个数据系列的原始数值过大或过小，不适合直接在图表上显示，或者需要进行单位转换，您可以在数据准备阶段对其进行缩放。这里以将“风速”数据除以10为例。

修改方案：最直接的方法是在PHP端进行数据查询和输出时，对相关列的值进行计算。

lt；?php $chartQuery = quot；SELECT Date， TmpExt， Vents， HumExt FROM ZiMeteo ORDER BY ID DESC LIMIT 144quot；； $chartQueryRecords = mysqli_query($connect， $chartQuery)； while ($row = mysqli_fetch_assoc($chartQueryRecords)) { // 对 'Vents' 列进行除以10的操作 $scaledVents = $row['Vents'] / 10； echo quot；['quot；.$row['Date'].quot；'，quot；.$row['TmpExt'].quot；，quot；.$scaledVents.quot；，quot；.$row['HumExt'].quot；]，quot；； }?gt；登录后复制

注意事项：在PHP端处理数据可以保证数据在提交到导入之前就已经满足展示要求，减少引入JavaScript的复杂性。如果数据已经在导入中，也可以在arrayToDataTable之前完全使用JavaScript的map或forEach方法对数据导入进行轻松和修改。

5. 完整示例代码

结合上述所有定制，以下是更新后的PHP和JavaScript代码示例：lt；div id=quot；curve_chartquot；style=quot；width： 900px； height： 500px；background-color： #333；quot；gt；lt；/divgt； lt；!-- 背景背景色 --gt；lt；script type=quot；text/javascriptquot； src=quot；https：//www.gstatic.com/charts/loader.jsquot；gt；lt；/scriptgt；lt；脚本类型=quot；text/javascriptquot；gt； google.charts.load('current'， {'packages'：['corechart']})； google.charts.setOnLoadCallback(drawChart)； function drawChart() { var rawData = [ ['Date'， '温度'， '风速（米/秒）'， 'Humidity']， // 更新列标题以反映单位 lt；?php $chartQuery = quot；SELECT Date， TmpExt， Vents， HumExt FROM ZiMeteo ORDER BY ID DESC LIMIT 144quot；； $chartQueryRecords = mysqli_query($connect， $chartQuery)； while ($row = mysqli_fetch_assoc($chartQueryRecords)) { //将风速除以10 $scaledVents = $row['Vents'] / 10； echo quot；['quot；.$row['Date'].quot；'，quot；.$row['TmpExt'].quot；，quot；.$scaledVents.quot；，quot；.$row['HumExt'].quot；]，quot；； } ?gt； ]； //删除数据，将日期字符串转换为 Date 对象以确保正确删除 var returned Data = rawData.map((row，index) =gt； { if (index === 0) return row； // 跳过标题行 // 假设日期字符串是 'YYYY-MM-DD HH：MM：SS' 或 'YYYY-MM-DD' const dateString = row[0]； const date = new Date(dateString.replace(/-/g， '/'))； // 格式化处理 return [date， row[1]，行[2]， 行[3]]； }

)； var data = google.visualization.arrayToDataTable(processedData)； var options = { title： '24小时趋势'， titleTextStyle： { color： 'white' }， // 示例：设置标题颜色 legend： {position： 'bottom'， textStyle： { color： 'white' } }， // 输出：设置图颜色 backgroundColor： '#例333'， // 示例：设置图表背景颜色 hAxis： { title： '时间'， titleTextStyle： { color： 'white' }， format： 'MM-dd HH：mm'， // 月日时间：分 Direction： -1， // 水平轴方向 textStyle： { color： 'white' // 水平轴颜色标签 }， gridlines： { color： '#555' // 效果：设置网格线颜色 } }， vAxis： { title： '数值'， titleTextStyle： { color： 'white' }， textStyle： { color： 'white' // 垂直轴标签颜色 }， gridlines： { color： '#555' // 示例：设置网格线颜色 } }， series： { // 可以为每个数据系列单独设置样式 0： { color： '#e2431e' }， // 温度 1： { color： '#6f9654' }， // 风速2： { color： '#1c91c0' } // 湿度 } }； var Chart = new google.visualization.LineChart(document.getElementById('curve_chart'))； Chart.draw(data， options)； }lt；/scriptgt；登录后复制总结

通过本教程，您应该已经掌握了 Google图表中日期格式、组件和数据缩放的核心技巧。这些定制化选项极大地增强了 Google图表的灵活性，能够适应更广泛的数据可视化需求。记住，关键在于理解选项对象的结构以及如何通过 PHP 或 JavaScript 对数据进行消耗。不断尝试和探索选项中的各种属性，将帮助您创建出功能强大且视觉吸引力强的图表。

以上就是Google Charts高级定制：日期格式、蓝牙连接与数据缩放的详细内容，更多请关注乐哥常识网其他！ 相关标签： mysql php javascript java html js 和 go 文章回调函数 一方 win 数据可视化 php JavaScript html foreach 日期格式函数 字符串映射对象 数据库 大家都在看： 继续课程：从头开始构建 Python Flask 和 MySQL Web 应用程序 - 第 2 部分 mysql数据库上传服务器空间_html/css_WEB-ITnose MySQL数据库连接失败？_html/css_WEB-ITnose python Flask html/css mysql BAE打造CSDN简历自动生成系统（附网站完整源码）_html/css_WEB-ITnose Python Django 在htmlmysql的数据_html/css_WEB-ITnose