文章/答案/技术大牛

发布

社区首页 >问答首页 >用PHP语言和JavaScript实现数据的图形表示

问用PHP语言和JavaScript实现数据的图形表示
EN

Stack Overflow用户

提问于 2014-02-17 17:53:44

回答 1查看 478关注 0票数 0

你好，我需要用图形形式(图表形式)表示数据。为此，我使用了一个jQuery插件，.The问题是当我使用PHP数组做这件事时，它对我不起作用。

我正在使用的代码在这里。

<html>
<head>

<title>JSChart</title>

<script type="text/javascript" src="../../../sources/jscharts.js"></script>

</head>
<body>

<div id="graph">Loading graph...</div>
<?php
   $phpArray = array("Peter"=>"35","Ben"=>"37","Joe"=>"43");
 $aa= json_encode($phpArray);

?>
<script type="text/javascript">
    var myData =  <?php echo $aa; ?>;
        alert(myData);
    var colors = ['#AF0202', '#EC7A00', '#FCD200', '#81C714'];
    var myChart = new JSChart('graph', 'bar');
    myChart.setDataArray(myData);
    myChart.colorizeBars(colors);
    myChart.setTitle('Year-to-year growth in home broadband penetration in U.S.');
    myChart.setTitleColor('#8E8E8E');
    myChart.setAxisNameX('');
    myChart.setAxisNameY('%');
    myChart.setAxisColor('#C4C4C4');
    myChart.setAxisNameFontSize(16);
    myChart.setAxisNameColor('#999');
    myChart.setAxisValuesColor('#7E7E7E');
    myChart.setBarValuesColor('#7E7E7E');
    myChart.setAxisPaddingTop(60);
    myChart.setAxisPaddingRight(140);
    myChart.setAxisPaddingLeft(150);
    myChart.setAxisPaddingBottom(40);
    myChart.setTextPaddingLeft(105);
    myChart.setTitleFontSize(11);
    myChart.setBarBorderWidth(1);
    myChart.setBarBorderColor('#C4C4C4');
    myChart.setBarSpacingRatio(50);
    myChart.setGrid(false);
    myChart.setSize(616, 321);
    myChart.setBackgroundImage('chart_bg.jpg');
    myChart.draw();
</script>

</body>
</html>

下面的代码运行良好。(使用javascript数组)

<script type="text/javascript">
    var myData = new Array(['Mar04-Mar05', 21], ['Mar05-Mar06', 28], ['Mar06-Mar07', 12], ['Mar07-Mar08', 17]);
        alert(myData);
    var colors = ['#AF0202', '#EC7A00', '#FCD200', '#81C714'];
    var myChart = new JSChart('graph', 'bar');
    myChart.setDataArray(myData);
    myChart.colorizeBars(colors);
    myChart.setTitle('Year-to-year growth in home broadband penetration in U.S.');
    myChart.setTitleColor('#8E8E8E');
    myChart.setAxisNameX('');
    myChart.setAxisNameY('%');
    myChart.setAxisColor('#C4C4C4');
    myChart.setAxisNameFontSize(16);
    myChart.setAxisNameColor('#999');
    myChart.setAxisValuesColor('#7E7E7E');
    myChart.setBarValuesColor('#7E7E7E');
    myChart.setAxisPaddingTop(60);
    myChart.setAxisPaddingRight(140);
    myChart.setAxisPaddingLeft(150);
    myChart.setAxisPaddingBottom(40);
    myChart.setTextPaddingLeft(105);
    myChart.setTitleFontSize(11);
    myChart.setBarBorderWidth(1);
    myChart.setBarBorderColor('#C4C4C4');
    myChart.setBarSpacingRatio(50);
    myChart.setGrid(false);
    myChart.setSize(616, 321);
    myChart.setBackgroundImage('chart_bg.jpg');
    myChart.draw();
</script>

</body>
</html>

javascript

php

回答 1

Stack Overflow用户

发布于 2014-02-17 18:55:44

图表对象需要一个二维数组(数组中的一个数组)。

如果你查看HTML源文件，你会发现json_encode给了你一个对象，看起来像这样：

{"Peter", "35", "Ben", "37", "Joe", "43"}

尝试使用以下命令：

function create_2d_array($array) {
    if (count($array) == 0)
        return "[]";

    $results = "[";
    foreach ($array as $key => $value) {
        $results .= "[\"$key\", $value], ";
    }

    $results = substr($results, 0, strlen($results) - 2);
    return $results . "]";
}

在javascript区域中：

var myData =  <?php echo create_2d_array($phpArray) . ';'; ?>;

票数 0

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

原文链接：

https://stackoverflow.com/questions/21825740

复制

相似问题

问用PHP语言和JavaScript实现数据的图形表示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用PHP语言和JavaScript实现数据的图形表示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用PHP语言和JavaScript实现数据的图形表示
EN