Jquery 使用YUI数据源填充HighCharts折线图

Jquery 使用YUI数据源填充HighCharts折线图,jquery,yui,datasource,highcharts,Jquery,Yui,Datasource,Highcharts,我想将基于YUI2 Flash的图表转换为纯javascript实现。我已经使用YUI DataSource定义了一个数据源,但我无法从中提取填充图表所需的数据。 我的代码如下所示: function setupChart(e) { var dataSource = new YAHOO.util.DataSource(document.location.href + '/index/charts'); dataSource.responseType = YAHOO.util.DataSourc

我想将基于YUI2 Flash的图表转换为纯javascript实现。我已经使用YUI DataSource定义了一个数据源,但我无法从中提取填充图表所需的数据。 我的代码如下所示:

function setupChart(e) {

var dataSource = new YAHOO.util.DataSource(document.location.href + '/index/charts');
dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
dataSource.responseSchema = {
fields: ['date', 'cust_view', 'cust_upd', 'notes', 'mydata_comp', 'mydata_not_completable'] };

var mychart = new Highcharts.Chart({
chart: {
  renderTo: 'chart',
  defaultSeriesType: 'line'
},
title: { text: null },
xAxis: {
  type: 'datetime',
  tickInterval: 7 * 24 * 3600 * 1000 // one week
},

yAxis: {
  title: { text: null }
},

series: [
  { name: 'Viewed', data: 'cust_view' }
  { name: 'Updated', data: 'cust_upd' }
  { name: 'Notes Created', data: 'notes' },
  { name: 'myData Completions', data: 'mydata_comp' },
  { name: 'myData marked as Incompletable', data: 'mydata_not_completable' } ]


});
}
所以,我知道dataSource保存了我想要的值,但我不知道如何在HighCharts中格式化语法以将其导出


关于这一点的第一个问题,如果不清楚,很抱歉。

您错过了从服务器检索数据的步骤

这是通过Ajax调用完成的。数据将在您提供的回调函数中可用。您将在回调函数中而不是在主线中创建图表。乙二醇

        dataSource.sendRequest("get_data.php",
            { 
          success: function (req,res) { 
                    // res.results holds the results. Use
                        // firebug to see its format
                        // The format is an array of JS objects.
                        // Each element of the array is an object with 
                        // properties from your fields configuration.
                        // 
                        // Eg
          [
            { date: "xxx", cust_view: "red",      notes: "apples", ... },
            { date: "xxx", cust_view: "green",    notes: "vegetable", ... },
            { date: "xxx", cust_view: "cherries", notes: "fruit", ... },
            ...
          ]                            
                        // create the Highcharts.chart and add the data to it
                        // here 
                   }

              failure: function () {
                       alert("Couldn't contact server");
                       }
            });

参见YUI中的示例

在IndexController中有一个名为chartsAction的函数,该函数在我的代码的第二行中引用。它从MySQL视图中提取数据值。我不确定get_data.php文件中包含什么内容。我正在尝试你的代码~Thanksget_data.php只是一个示例url。看起来您的url是
document.location.href+'/index/charts'
,因为您已经设置了它,所以在调用sendRequest方法时可以使用null。看文档,我还没怎么用过这部分数据源谢谢,拉里。“null”起作用了,我现在调用我需要的值。我在这件事上挣扎了太久。如果你不介意的话,我可以写一篇博文很高兴它起作用了。博客帖子总是好的。记住适当的向上投票和检查答案。欢迎来到StackOverflow。确保对你认为有帮助的答案(包括对他人问题的答案)进行投票。对于你自己的问题,记得“检查”解决问题的答案。