个人中心
gpt4 book ai didi

php - 最后一步，将MySQL与PHP连接到JSON与D3(javascript)很酷的东西

转载 作者：行者123 更新时间：2023-11-29 03:05:27 26 4
gpt4 key购买 nike

这个问题已经持续了！这些聪明人在哪里？
下载链接！example.zip（在“高级街道”上，我取了原件，放了一些类固醇，这样你就更容易找到问题所在！）
现场演示：Advanced graph on steroids
现场演示：Advanced graph Original
现场演示：Simple graph takes values directly from mysql
所以答案就在粉红色的盒子上！经验值
这是为高级图形生成随机数据的代码！

function CAGARRO() { 
  var data1 = []; 
  var data2 = [];
  var data3 = []; 
  var data4 = [];
  var data5 = [];  
  var data6 = [];
  var data7 = [];
  var data8 = [];

// number 8 means 8lines, number 130 means create 130 x values, 
// .1 means the minimum Y value that the random code can give to all his numbers
stream_layers(8,130,.1).map(function(layer, PIXARADA) { 
      layer.forEach(function(TUTANCAMON, i) {
          var object = { x: TUTANCAMON.x };
          object['stream' + (PIXARADA + 1)] = TUTANCAMON.y;
          eval('data' + (PIXARADA + 1)).push(object);
      });
});


var dataA = extend(data1, data2);
var dataB = extend(data3, data4);
var dataC = extend(data5, data6);
var dataD = extend(data7, data8);

var dataY = extend(dataA, dataB);
var dataZ = extend(dataC, dataD);

var RESULTATS = extend(dataY, dataZ);


return RESULTATS;
}

This tutorial太棒了，你无法想象将MySQL数据库连接到D3（javascript）图表是多么简单。（实施15分钟）
唯一的“问题”是教程中的图表“太简单”。只有一条线！
然后我们有“非常酷的东西”像这里： Live Demo of the CoolStuff Chart
这里： Original Source CoolStuff Chart
当你快乐地走到这一步时，你会发现以下不同之处：
-教程来源： 
d3.json("php/data2.php", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

本教程源是指从MySQL数据库接收的数据，如下所示： 
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},
{"date":"25-Apr-12","close":"99.00"},{"date":"24-Apr-12","close":"130.28"},
{"date":"23-Apr-12","close":"166.70"},{"date":"20-Apr-12","close":"234.98"},
{"date":"19-Apr-12","close":"345.44"},{"date":"18-Apr-12","close":"443.34"},
{"date":"17-Apr-12","close":"543.70"},{"date":"16-Apr-12","close":"580.13"},
{"date":"13-Apr-12","close":"605.23"},{"date":"12-Apr-12","close":"622.77"},
{"date":"11-Apr-12","close":"626.20"},{"date":"10-Apr-12","close":"628.44"},
{"date":"9-Apr-12","close":"636.23"},{"date":"5-Apr-12","close":"633.68"},
{"date":"4-Apr-12","close":"624.31"},{"date":"3-Apr-12","close":"629.32"},
{"date":"2-Apr-12","close":"618.63"},{"date":"30-Mar-12","close":"599.55"},
{"date":"29-Mar-12","close":"609.86"},{"date":"28-Mar-12","close":"617.62"},
{"date":"27-Mar-12","close":"614.48"},{"date":"26-Mar-12","close":"606.98"}]

在MySQL上，这个丑陋的数据看起来是这样的：
不管怎么说，超级coolStuff图表是所有的数据都是用一些奇怪的随机数循环创建的，对于我来说，把从MySQL接收到的数据插入到coolStuff代码中真是太糟糕了！!
这里是“CoolStuff”循环的副本： 
function testData() {
  var data1 = [];
  var data2 = [];
  var data3 = [];

  stream_layers(3,128,.1).map(function(layer, index) {
    layer.forEach(function(item, i) {
      var object = { x: item.x };
      object['stream' + (index + 1)] = item.y;
      eval('data' + (index + 1)).push(object);
    });
  });

有什么想法吗？

最佳答案

好吧，我们有三个想法直到知道。
一。“MySQL”数据库
有3个表被称为“Date1”、“Date2”和“Date3”，每个表有2列数据：
 _________________________________________________________________________________|
|表：Data1 |表：Data2 |表：Data3|
 _________________________________________________________________________________|
|日期|关闭|日期|关闭|日期|关闭|
|_________________________________________________________________________________|
|2012年5月1日| 58.13 | 12年5月1日| 58.13 | 12年5月1日| 58.13|
|12年4月30日| 53.98 | 12年4月30日| 53.98 | 12年4月30日| 53.98|
|12年4月27日| 67.00 | 12年4月27日| 67.00 | 12年4月27日| 67.00|
|_________________________________________________________________________________|
2。一个包含一些JSON数据的php文件/网桥
________________                                 _______________________
|表Data1 |-Data1.php->|数据转换为JSON|
________________                                 _______________________________________                                 _______________________
|表Data2 |-Data2.php->|数据转换为JSON|
________________                                 _______________________________________                                 _______________________
|表Data3 |-Data3.php->|数据转换为JSON|
________________                                 _______________________
(Php complete Source here)从我们的表中选择数据

$myquery = "SELECT  `date`, `close` FROM  `data1`";<br>

然后将 $data变量声明为数组（ $data = array();），并将查询返回的信息馈送到 $data数组中； 
for ($x = 0; $x < mysql_num_rows($query); $x++) {
    $data[] = mysql_fetch_assoc($query);
}

（这是一段奇特的代码，它逐行获取信息并将其放入数组中）
然后，我们将json格式的 echo数组（ $data）返回到运行 echo json_encode($data);脚本的任何对象中
所以现在当我们输入“data1.php”、“data2.php”或“data3.php”时，我们会得到：
“data1.php” 
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

“data2.php” 
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

“data3.php” 
[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},
{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},

三。带有3个线图的D3.js多图表。
Multichart demo但是这个multichart正在创建它自己的随机数据。使用此代码： 
function testData() {
  var data1 = [];
  var data2 = [];
  var data3 = [];

  stream_layers(3,128,.1).map(function(layer, index) {
    layer.forEach(function(item, i) {
      var object = { x: item.x };
      object['stream' + (index + 1)] = item.y;
      eval('data' + (index + 1)).push(object);
    });
  });

  var data = extend(data1, data2);
  var result = extend(data, data3);

  return result;
}

因此，我们在用户的“Xaranqe”建议下创建以下代码，将我们的“数据”插入这个multichart 
function testData() {
    var data1 = [];
    var data2 = [];
    var data3 = [];

    d3.json("php/data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data1.push(d.close);
        });
    d3.json("php/data2.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data2.push(d.close);
        });
    d3.json("php/data3.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data3.push(d.close);
        });
    // More similar functions here
    });

  var data = extend(data1, data2);
  var result = extend(data, data3);

  return result;
}

但我们得到的结果是，一张空白页。。所以我们缺少了一些东西。。嗯。。。
有什么新主意吗？
我给你留下一份直接的multichart代码！谢谢你的帮助！
相信社区会从这些信息中受益匪浅！ 
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">

<style>
body {
  overflow-y:scroll;
}
text {
  font: 12px sans-serif;
}
svg {
  display: block;
}
#chart1 svg {
  height: 500px;
  min-width: 100px;
  min-height: 100px;
/*
  margin: 50px;
  Minimum height and width is a good idea to prevent negative SVG dimensions...
  For example width should be =< margin.left + margin.right + 1,
  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}
</style>

<body>
  <div id="chart">
    <svg style="height: 500px;"></svg>
  </div>
  <div id="stream1" style="float: left; margin-left: 15px;">
    <div><h1>Stream #1</h1></div>
  </div>
  <div id="stream2" style="float: left; margin-left: 15px;">
    <div><h1>Stream #2</h1></div>
  </div>
  <div id="stream3" style="float: left; margin-left: 15px;">
    <div><h1>Stream #3</h1></div>
  </div>

<script src="../lib/d3.v2.js"></script>
<script src="../lib/crossfilter.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/models/lineWithFocusChart.js"></script>
<script src="stream_layers.js"></script>

<script>

extend = function(destination, source) {
    for (var property in source) {
    if (property in destination) { 
      if ( typeof source[property] === "object" &&
        typeof destination[property] === "object") {
          destination[property] = extend(destination[property], source[property]);
      } else {
        continue;
      }
    } else {
      destination[property] = source[property];
    };
    }
    return destination;
};
var rawData = testCrossfilterData();
nv.addGraph(function() {
  var chart = nv.models.lineWithFocusChart();
  chart.xAxis
      .tickFormat(d3.format(',f'));
  chart.x2Axis
      .tickFormat(d3.format(',f'));
  chart.yAxis
      .tickFormat(d3.format(',.2f'));
  chart.y2Axis
      .tickFormat(d3.format(',.2f'));
  chart.dispatch.on('brush', click);
  var data = normalizeData(rawData.datum, 
        [
        {
          name: 'Stream #1',
          key: 'stream1'
        },
        {
          name: 'Stream #2',
          key: 'stream2'
        },
        {
          name: 'Stream #3',
          key: 'stream3'
        }
        ]);
nv.log(data);
  d3.select('#chart svg')
      .datum(data)
    .transition().duration(500)
      .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
});

function click(e) {
  extent = e.extent;
  rawData.data.filter([extent[0], extent[1]]);
  streams("stream1");
  streams("stream2");
  streams("stream3");
}

function streams(key) {
  var topData = rawData.data.top(5);
  var stream = d3.select("div#" + key).selectAll(".stream-data")
      .data(topData, function(d) {
        return d.key;
      });
  stream
    .html(function(d) {
      return d[key];
    })
  stream.enter().append("div")
      .attr("class", "stream-data")
      .html(function(d) {
        return  d[key]; 
      })
  stream.exit().remove();
  stream.order();
}

function normalizeData(data, series) {
  var sort = crossfilter.quicksort.by(function(d) { return d.key; });
  var result = [];
  for (var i = 0; i < series.length; i++) {
    var seriesData = data.top(Infinity);
    var sorted = sort(seriesData, 0, seriesData.length);
    var values = [];

    seriesData.forEach(function(item, index) {
        values.push({x: item.key,  y: item.value[series[i].key]});
    });
    result.push({key: series[i].name, values: values, color: series[i].color});
  };
  return result;
};

function testCrossfilterData() {
  var data = crossfilter(testData());

  try {
    data.data = data.dimension(function(d) { return d.x; });
    data.datum = data.data.group(function(d) { return d; });
    data.datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      });

    data.stream1 = data.dimension(function(d) { return d.stream1; });
    data.stream1datum = data.data.group(function(d) { return d; });
    data.stream1datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );

    data.stream2 = data.dimension(function(d) { return d.stream2; });
    data.stream2datum = data.data.group(function(d) { return d; });
    data.stream2datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p;
      },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );

    data.stream3 = data.dimension(function(d) { return d.stream3; });
    data.stream3datum = data.data.group(function(d) { return d; });
    data.stream3datum.reduce(
      function (p, v) {
        p.count++;
        p.stream1 += v.stream1;
        p.stream2 += v.stream2;
        p.stream3 += v.stream3;
        return p; },
      function (p, v) {
        p.count--;
        p.stream1 -= v.stream1;
        p.stream2 -= v.stream2;
        p.stream3 -= v.stream3;
        return p;
      },
      function () {
        return {count: 0, stream1: 0, stream2: 0, stream3: 0};
      }
    );
  } catch (e) {
    nv.log(e.stack);
  }
  return data;
}

function testData() {
    var data1 = [];
    var data2 = [];
    var data3 = [];
    d3.json("php/data1.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data1.push(d.close);
        });
    d3.json("php/data2.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data2.push(d.close);
        });
    d3.json("php/data3.php", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.close = +d.close;
            data3.push(d.close);
        });
    // More similar functions here
    });
  var data = extend(data1, data2);
  var result = extend(data, data3);
  return result;
}

</script>
</body>
</html>

关于php - 最后一步，将MySQL与PHP连接到JSON与D3(javascript)很酷的东西，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16266109/

26 4 0
文章推荐： iOS:导航到未直接从应用程序委托(delegate)连接的 View Controller
文章推荐： php - 从 textfield 和 textarea 插入到 sql 不起作用
文章推荐： ios - Facebook SDK for iOS 使用开放图谱 API 贴在墙上
文章推荐： mysql - 是否 hibernate 关闭连接？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com