2

Im using highcharts, right now I have an example chart. Before I pull data from the api, I want to hardcode my own data into the chart. Right now I have my chart data in my javascript file. I want to hardcode the data in my Model, and then have my Controller pull it from there, to display it on the chart in my View. My current code is below. Thanks in advance.

Javascript file below:

$(function () {
        $('#container').highcharts({
            chart: {
                borderColor: 'gray',
                borderWidth: 2,
                // borderRadius: 20,
                backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(200, 200, 255)']
                ]
            },
                zoomType: 'x',
                spacingRight: 20
            },
            title: {
                text: 'Bitcoin Price'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Drag your finger over the plot to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 14 * 24 * 3600000, // fourteen days
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Price'
                }
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'USD to EUR',
                pointInterval: 24 * 3600 * 1000,
                pointStart: Date.UTC(2006, 0, 01),
                data: [
                    0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258, and so on....these are just random numbers to fill in the data.....

                ]
            }]
        });

    $.ajax({
               type: "POST",
               url: "/chart/ajax_get_chart", // the URL of the controller action method
               data: null, // optional data
               success: function(result) {
                    // do something with result
               },                
               error : function(req, status, error) {
                    // do something with error   
               }
           });

    });

In my Controller I have:

public function ajax_get_chart() {

}

In my Model I have:

public function ajax_get_chart() {

  }
4

1 回答 1

0

是的，你可以这样做。

有一个类似的方法

generateChart(data){
//all the chart related stuff
}

在 ajax 调用成功回调中使用您获得的数据调用 generateChart 方法

$.ajax({
               type: "POST",
               url: "/chart/ajax_get_chart", // the URL of the controller action method
               data: null, // optional data
               success: function(response) {
                  generateChart(response)
               },                
               error : function(req, status, error) {
                    // do something with error   
               }
           });

所以最后模型中的数据，控制器中的ajax调用和gerateChart将为您提供视图。

希望这会有所帮助。

于 2013-10-15T07:27:04.843 回答