首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >用数组填充X轴的flot图

用数组填充X轴的flot图
EN

Stack Overflow用户
提问于 2014-01-05 19:11:19
回答 2查看 915关注 0票数 1

我试图只使用存储在数组$date[]中的数据填充xaxis

这是我的编码;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
        <?php
// Main query to pull data from 'tests' table
    $sql = "SELECT UNIX_TIMESTAMP(`date`)*1000 AS unixDate,`date`, `test1`, `test2`, `test3`, `test4`, `test5`, `test6`, `test7`, `test8`, `test9`, `test10`, `test11`, `test12`, `test13`, `test14` FROM `tests` WHERE member_id = '1' ORDER by `date` ASC";
    $result = mysql_query($sql) or die ("no query");

//  Dataset#1
while($row = mysql_fetch_assoc( $result ))  {
    $dataset1[] = array( $row['unixDate'], sprintf( "%.3f", $row['test1'] ));
    $date[] = array($row['unixDate']);
    }
?>
<div id="chart1Canvas" style="width:510px;height:200px;">
<div id="chart1" style="width:500px;height:200px;"></div></div>
<script type="text/javascript">
    //START CHART#1
    var dateArray = [ <?php echo json_encode($date); ?> ];
    var chart1Options = {
        xaxis: {show: true, mode: "time", timeformat: "%y-%m-%d", ticks: dateArray},
        yaxis: {show: true, min: 1.000, max: 1.050, tickDecimals: 3 },
        lines: {
            show: true,
            fill: true,
            fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2}] }
        },
        points: { show: true, radius: 1 },
        grid: {
            show: true,
            color: '#fff',
            backgroundColor: false,
            borderWidth: 0,
            hoverable: true,
            clickable: true }
    };

    function getTooltip(label, x, y) {
    return "Your sales for " + x + " was $" + y; }

    var dataset1 = { data: <?php echo json_encode($dataset1); ?>, color: 'white'};

    $.plot($("#chart1"), [ dataset1 ], chart1Options);
    //END CHART#1
</script>

当我运行这整个xaxis磁盘时,我假设必须先将JSON_encode数组分配给xaxis的“ticks”选项,然后再将它分配给date[]数组。

有人能检查一下我在这里做错了什么吗?

谢谢。

编辑:改变了一些东西,现在它正在做一些事情,但仍然没有网格和标签的xaxis?

检查链接:http://www.myreeftests.com/graphs2.php

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-06 02:30:52

您的dateArray如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var dateArray = [ [["1367704800000"],["1367791200000"], ...

但它必须是这样的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var dateArray = [1367704800000,1367791200000, ...

因此,删除javascript中的外部[ ],并将时间戳格式化为长in,而不是字符串数组(不确定如何在php中这样做)。

有关更多信息,请参见文档

票数 2
EN

Stack Overflow用户

发布于 2014-01-06 12:48:24

好的,在混乱的情况下,我设法让它用数组来显示正确的滴答,最后一个问题是让滴答均匀地排列出来;

链接

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20942361

复制
相关文章
用值填充JavaScript数组的几种方法
通过将点扩展符与数组实例的 keys 方法结合使用,我们可以从0开始以升序数填充数组。
张张
2020/04/21
2.6K0
用值填充JavaScript数组的几种方法
Echarts统计图x轴实现拉伸滑动
dataZoom: [ { type: "slider", show: true, // x轴是否启用 start: 94, // 从哪里开始显示 end: 100, // 到哪里结束显示
王小婷
2022/09/28
1.7K0
Echarts统计图x轴实现拉伸滑动
x轴换行
//格式化图表横坐标文字 let textFormatter = function(e) { let arr = e.split(",");/// 将字符串转数组 let str = arr[0] + "\n" + arr[1]; return str; };
用户4344670
2020/06/19
1.9K0
x轴换行
Flot 介绍
最近在项目里面要用到 JavaScript 来绘制图表,JQuery 的插件 Flot 是一个不错的选择。和我之前介绍过的 D3 不同,它的唯一目的就是用来绘制曲线图的,即便是它的不同插件的功能,也基本上都在这个范畴之内。
四火
2022/07/15
9540
Flot 介绍
[Python]用matplotlib画以时间日期为x轴的图像
原文链接:https://blog.csdn.net/humanking7/article/details/80802435
祥知道
2020/03/10
4.1K0
Echart图表X轴为时间轴的解释 原
绘制Echart图表,一般情况下x轴type: 'category',但有时候也用到type:  'time', 这两者的主要区别是,当为时间轴时,不需要指定xAxis 对象的data,时间轴显示的Label 是series对象里面的value[0]的日期,value[0]可以是时间戳也可以是“2018-12-5 10:20:30”这种类型,不能是无效的时间格式类型,同样可以格式化Label
tianyawhl
2019/04/04
8.1K0
highchar的x轴数据自动生成
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
逝兮诚
2019/10/30
8830
【Python】pyecharts 模块 ⑥ ( 绘制柱状图 | pyecharts 绘制柱状图步骤 | 柱状图 x 轴 / y 轴 翻转 | 柱状图数据标签位置设置 )
首先 , 导入 柱状图 Bar 类 , 该类定义在 pyecharts.charts 模块中 ;
韩曙亮
2023/10/11
1.3K0
【Python】pyecharts 模块 ⑥ ( 绘制柱状图 | pyecharts 绘制柱状图步骤 | 柱状图 x 轴 / y 轴 翻转 | 柱状图数据标签位置设置 )
24:蛇形填充数组
24:蛇形填充数组 总时间限制: 1000ms 内存限制: 65536kB描述 用数字1,2,3,4,...,n*n这n2个数蛇形填充规模为n*n的方阵。 蛇形填充方法为: 对于每一条左下-右上的斜线,从左上到右下依次编号1,2,...,2n-1;按编号从小到大的顺序,将数字从小到大填入各条斜线,其中编号为奇数的从左下向右上填写,编号为偶数的从右上到左下填写。 比如n=4时,方阵填充为如下形式: 1  2  6  7 3  5  8  13 4  9  12 14 10 11 15 16 输入输入一
attack
2018/04/03
1.8K0
【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日。 图片.png 实现代码如下: <!DOCTYPE html> <html> <head> <m
王小婷
2018/06/19
5.2K0
matlab 图像填充斜线_怎么更改柱形图的填充
针对这种情况,MATLAB提供了若干特殊图形绘 制函数。接下来主要介绍特殊图形的绘制方法,主 要图形包括:条形图、区域图、饼状图、柱状图、 离散图、罗盘图、羽毛图、……
全栈程序员站长
2022/11/02
1.9K0
matlab填充图形_不同图案填充条形图
2、有四种选择: applyhatch ,applyhatch plus , applyhatch_plusC , 和 Hatch fill patterns plus Color & Invert,个人感觉后两种更好一些。
全栈程序员站长
2022/11/02
1.2K0
ggplot2扩展包gg.gap,截取x轴用facet(),截取y轴交给gg.gap
面对的疑问,站长最开始并没有想到去开发一个R包解决。 ggplot2以及依赖它开发的包已经丰富,原以为在网络搜索一下肯定有解决方案,但谁曾想这样的需求真的没有找到完美的解决方案。 为了完善这个看起来很平常的功能,站长决定亲自操刀去写个包。
Chris生命科学小站
2023/02/28
1.4K0
ggplot2扩展包gg.gap,截取x轴用facet(),截取y轴交给gg.gap
创意饼图的制作技巧——图标填充饼图!
创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技巧 图标填充饼图 首先你需要下载两个代表男性、女性的图标素材 百度一下一大堆,最好是PNG格式
数据小磨坊
2018/04/10
2.7K0
创意饼图的制作技巧——图标填充饼图!
小程序X轴渐入动画组件
先定义小程序中要施加渐入动画的DOM元素,注意该元素的css样式里要添加下opaction属性,通常设为0,意为从全透明开始渐入。另外还需要根据实际场景设定该元素的left或right值,以供动画方法定义滑动距离。
前端_AWhile
2022/05/10
7140
使用PyEcharts画双轴图
安装PyEcharts:pip install pyecharts 存储图片还要再安装(实际上是必须要安装的,否则render的时候会出错):pip install pyecharts-snapshot
SeanCheney
2019/02/27
3.8K0
Dygraphs 中 x 轴等间距实现
本文,我们来探讨下,如何在 Dygraphs 中的 X 轴上等间距的展示每一条竖线,间隔是 1s,如上图。
Jimmy_is_jimmy
2022/09/21
7640
Dygraphs 中 x 轴等间距实现
背景填充式条形图、柱图
今天跟大家分享背景填充式条形图、柱图的制作技巧! ▽▼▽ 本例要介绍的填充式图表与之前推送的一篇温度计风格图表的制作方式有点儿类似,不过制作方法上有些不同,在这里再次跟大家分享一下! ●●●●● 首先
数据小磨坊
2018/04/10
7860
背景填充式条形图、柱图
Matlab绘制包含双Y轴的图
创建左右两侧都有 y 轴的坐标区。yyaxis left 命令用于创建坐标区并激活左侧。后续图形函数(例如 plot)的目标为活动侧。绘制数据对左侧 y 轴的图。
用户9925864
2022/07/27
2.1K0
Matlab绘制包含双Y轴的图
绘制双坐标轴图
双坐标轴图作为常用的可视化方式之一,可以在同一张图中同时展示两个不同范围的数据,示例如下
生信修炼手册
2020/08/28
1.6K0

相似问题

整数x轴Jquery flot图

11

更改flot图的x轴单位

10

Flot图x轴值重叠而不是堆叠

10

X轴的核心图填充

11

沿X轴的岩心图填充图?

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文