使用Javascript& amp;创建双极图表PHP

时间:2018-04-16 13:20:48

标签: javascript php variables charts

我是PHP&的新手Javascript因此可能有很多菜鸟错误 - 我试图将4个php变量(例如'温和活跃')传递给具有指定值的Javascript,然后在Javascript图表上绘制它们。关于我哪里出错的任何建议?图表的标签永远不会移动,例如Active&反思,因为它们是对立的,它们的价值保持在维度1。将值传递给图表的最有效方法是什么?提前谢谢。

<?php

    $dbQuery = $db->prepare("select dimension1, dimension2, dimension3, dimension4 FROM indexLearningStyle WHERE studentNumber = '".$currentUser."'");
    $dbQuery-> execute();

    while ($dbRow = $dbQuery->fetch (PDO::FETCH_ASSOC)) {
    $dimension1 = $dbRow["dimension1"];
    $dimension2 = $dbRow["dimension2"];
    $dimension3 = $dbRow["dimension3"];
    $dimension4 = $dbRow["dimension4"]; 

    }

    $stronglyActive = 0;
    $moderatelyActive = 0.16;
    $mildlyActive = 0.32;

    $stronglyReflective = 1.0;
    $moderatelyReflective = 0.84;
    $mildlyReflective = 0.68;

    $stronglySensing = 0;
    $moderatelySensing = 0.16;
    $mildlySensing = 0.32; 

    $stronglyIntuitive = 1.0;
    $moderatelyIntuitive = 0.84;
    $mildlyIntuitive = 0.68;

    $stronglyVisual = 0;
    $moderatelyVisual = 0.16;
    $mildlyVisual = 0.32;

    $stronglyVerbal = 1.0;
    $moderatelyVerbal = 0.84;
    $mildlyVerbal = 0.68;

    $stronglySequential = 0;
    $moderatelySequential = 0.16;
    $mildlySequential = 0.32;

    $stronglyGlobal = 1.0;
    $moderatelyGlobal = 0.84;
    $mildlyGlobal = 0.68;



  ?>
  </body>

  <body class="">

  <br><br>
        <div id="studentILS">
        </div>
  </div>
  <br><br><br>


<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="cssBipolarChart.js"></script>

<script>

    var dimension1 = <?php $dimension1 ?>;
    var dimension2 = <?php $dimension2 ?>;
    var dimension3 = <?php $dimension3 ?>;
    var dimension4 = <?php $dimension4 ?>;

    var stronglyActive = <?php $stronglyActive ?>;
    var moderatelyActive = <?php $moderatelyActive ?>;
    var mildlyActive = <?php $mildlyActive ?>;

    var stronglyReflective = <?php $stronglyReflective ?>;
    var moderatelyReflective = <?php $moderatelyReflective ?>;
    var mildlyReflective = <?php $mildlyReflective ?>;

    var stronglySensing = <?php $stronglySensing ?>;
    var moderatelySensing = <?php $moderatelySensing ?>;
    var mildlySensing = <?php $mildlySensing ?>;

    var stronglyIntuitive = <?php $stronglyIntuitive ?>;
    var moderatelyIntuitive = <?php $moderatelyIntuitive ?>;
    var mildlyIntuitive = <?php $mildlyIntuitive ?>;

    var stronglyVisual = <?php $stronglyVisual ?>;
    var moderatelyVisual = <?php $moderatelyVisual ?>;
    var mildlyVisual = <?php $mildlyVisual ?>;

    var stronglyVerbal = <?php $stronglyVerbal ?>;
    var moderatelyVerbal = <?php $moderatelyVerbal ?>;
    var mildlyVerbal = <?php $mildlyVerbal ?>;

    var stronglySequential = <?php $stronglySequential ?>;
    var moderatelySequential = <?php $moderatelySequential ?>;
    var mildlySequential = <?php $mildlySequential ?>;

    var stronglyGlobal = <?php $stronglyGlobal ?>;
    var moderatelyGlobal = <?php $moderatelyGlobal ?>;
    var mildlyGlobal = <?php $mildlyGlobal ?>;



    var studentResults = [
        ["Active", "Reflective", 0],
        ["Sensing", "Intuitive", 0.16],
        ["Visual", "Verbal", 0.32],
        ["Sequential", "Global", 0.68],
        ["Sequential", "Global", 0.84],
        ["Sequential", "Global", 1.0]
    ]

    $(document).ready(function() {
        $("#studentILS").drawCSSBipolarChart({
            data: studentResults,
            bipolar: true
        })
    })
</script>

1 个答案:

答案 0 :(得分:0)

正如@Lawrence所说,你应该使用array&amp;正确的标签。

以下是您应该尝试的简单代码:

<?php
    //Fetch following values and assign to array
    $stronglyGlobal = 1.0;
    $moderatelyGlobal = 0.84;
    $mildlyGlobal = 0.68;
?>
<!-- Correct opening/closing body-->
<div id="studentILS"></div>
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="cssBipolarChart.js"></script>

<script>
    //Loop through PHP array & print var in JavaScript
    var stronglyGlobal = <?php echo $stronglyGlobal ?>; //Notice echo over here
    var moderatelyGlobal = <?php echo $moderatelyGlobal ?>;
    var mildlyGlobal = <?php echo $mildlyGlobal ?>;

    var studentResults = [
        ["Sequential", "Global", mildlyGlobal], //Updated values assigned
        ["Sequential", "Global", stronglyGlobal],
        ["Sequential", "Global", moderatelyGlobal]
    ]

    $(document).ready(function() {
        $("#studentILS").drawCSSBipolarChart({
            data: studentResults,
            bipolar: true
        })
    })
</script>

希望这个答案能给你提示。