来自 php 的 highcharts 动态数据

发布于 2024-12-29 14:16:23 字数 939 浏览 0 评论 0原文

我正在尝试使用从 PHP 动态生成的数据绘制图表（样条线）。我为此目的使用的 JavaScript 库是 HighCharts。

PHP 生成一个值数组，其格式与

array(
      array("1304294461000",69,"1304899261000",28),
      array("1304294431000",3,"1304899161000",32)
)

我随后使用 json_encode 传递到 JavaScript 数组的格式相同。但是，当我将这些值作为数据推送时，它似乎不起作用。

例如，这里是一个包含相关代码片段的示例，例如 -

 var namesArr = <?php echo json_encode($namesArr); ?>;

 var progressTrendsData = <?php echo json_encode($progressTrendsData); ?>;
 var chart;
 var options = {
     chart: {
         renderTo: 'trendsDiv',
         type: 'spline'
     },
     series: [{
     name: '',
     data: []
     }]
 };

 for(var i=0;i<namesArr.length;i++) {
    options.series.push({
            name: namesArr[i],
            data: progressTrendsData[i]
    });
 }

 chart = new Highcharts.Chart(options);

选项当然包含图表所需的其他相关数据。然而，上述代码所做的唯一事情是在 1 月 1 日绘制单个值，而不管推送的实际数据如何。

原文

I am trying to plot a chart (Spline) using data that is dynamically generated from PHP. The JavaScript library I am using for this purpose is HighCharts.

The PHP generates an array of values in the format like

array(
      array("1304294461000",69,"1304899261000",28),
      array("1304294431000",3,"1304899161000",32)
)

which I am then passing onto a javascript array using json_encode. However, when I push these values as data, it doesn't seem to be working.

For example, here's an example with relevant code snippets like -

 var namesArr = <?php echo json_encode($namesArr); ?>;

 var progressTrendsData = <?php echo json_encode($progressTrendsData); ?>;
 var chart;
 var options = {
     chart: {
         renderTo: 'trendsDiv',
         type: 'spline'
     },
     series: [{
     name: '',
     data: []
     }]
 };

 for(var i=0;i<namesArr.length;i++) {
    options.series.push({
            name: namesArr[i],
            data: progressTrendsData[i]
    });
 }

 chart = new Highcharts.Chart(options);

The options contain other relevant data needed for the chart of course.
However, the only thing the above code is doing is plotting a single value at the date January 1 irrespective of the actual data that is being pushed.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小镇女孩 2025-01-05 14:16:23

我倾向于同意马克的观点。但很难确切地说你的数据最终应该是什么样子。尝试查看 highcharts 演示页面上 ajax 数据示例的数据加载部分。

更新：

尝试以下伪代码：

var chart;
var options = {
     chart: {
         renderTo: 'trendsDiv',
         type: 'spline'
     },
     series: [{
     name: '',
     data: []
     }]
 };

var seriesInfo=[];
seriesInfo[0]={"name":"Series A","data":[]};
seriesInfo[1]={"name":"Series B","data":[]};

//Loop over the series and populate the data
seriesInfo[0].data.push({x:<insert Series A timestamp>,y:<insert Series A y value>});
seriesInfo[1].data.push({x:<insert Series B timestamp>,y:<insert Series B y value>});

options.series.push(seriesInfo[0]);
options.series.push(seriesInfo[1]);

chart = new Highcharts.Chart(options);

I would tend to agree w/Mark on this. It is hard to tell exactly your data is supposed to end up looking like though. Try looking at the data loading portion of the ajax data example on the highcharts demo page.

UPDATE:

Try the following pseudocode:

var chart;
var options = {
     chart: {
         renderTo: 'trendsDiv',
         type: 'spline'
     },
     series: [{
     name: '',
     data: []
     }]
 };

var seriesInfo=[];
seriesInfo[0]={"name":"Series A","data":[]};
seriesInfo[1]={"name":"Series B","data":[]};

//Loop over the series and populate the data
seriesInfo[0].data.push({x:<insert Series A timestamp>,y:<insert Series A y value>});
seriesInfo[1].data.push({x:<insert Series B timestamp>,y:<insert Series B y value>});

options.series.push(seriesInfo[0]);
options.series.push(seriesInfo[1]);

chart = new Highcharts.Chart(options);

回复收藏 0 原文

~没有更多了~