【问题标题】:How to feed series data that has x axis and y axis values in line highcharts?如何在行高图中提供具有 x 轴和 y 轴值的系列数据?
【发布时间】:2014-06-02 10:19:47
【问题描述】:

我必须在折线图中显示一些实验结果。我让它适用于静态数据,但我想让它动态化。

所以我得到了什么:

我有一个折线图:

       var options = {
            chart: {
                renderTo: 'container',
                        type: 'line',
                            },
                    series: [{}]
        }

我想要这样的东西:http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/

我正在努力制作这些数据:

            data: [
            [0, 29.9], 
            [1, 71.5], 
            [3, 106.4]
        ]

在 php 端发送 jquery,然后馈送到我的折线图。 我知道 JSON 编码,但我应该如何首先在 php 中创建和排列? 我应该如何对其进行编码并将其提供给 jquery 并提供我的折线图?

到目前为止,这适用于静态数据:

             var arr = [[0, 15], [10, 50], [20, 56.5], [30, 46.5], [40, 22.1],
                            [50, 2.5], [60, 27.7], [70, 55.7], [80, 76.5]];
                options.series[0].name = 'Occlusion';
                options.series[0].data = arr;
    var l = new Highcharts.Chart(options);
    });

但我希望 arr 来自 php。

提前致谢。

【问题讨论】:

标签: php jquery highcharts


【解决方案1】:

如果你想创建这样的格式,你需要先重组它们。考虑这个例子:

<?php

// lets say you have a raw data like this
$php_values = array(
    array(0, 15),
    array(10, 50),
    array(20, 56.5),
    array(30, 46.5),
    array(40, 22.1),
    array(50, 2.5),
    array(60, 27.7),
    array(70, 55.7),
    array(80, 76.5),
);

$temp = array();
// format each array
foreach($php_values as $key => $value) {
    $temp[] = '['.implode(',', $value).']';
}
// then format the whole array
$formatted_values = '['.implode(',', $temp).']';

?>
<script type="text/javascript">

    var values = <?php echo $formatted_values; ?>;
    console.log(values);

</script>

Sample Output

编辑:正如@SebastianBochan 指出的那样,$formatted_values = json_encode($php_array) 工作方式相同(可能是最好和最干净的方式)

【讨论】:

  • echo json_encode($php_values) 会不会更好,而不是使用内爆等?
  • @SebastianBochan 感谢您指出这一点,不错的选择
猜你喜欢
  • 2015-08-30
  • 2013-02-24
  • 1970-01-01
  • 2017-07-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多