1

我是使用 JavaScript 编程的新手,在实现 HighCharts 图表时遇到了一些麻烦。我使用的 API 是 markit ( https://github.com/markitondemand/DataApis/blob/master/MarkitTimeseriesServiceSample.js ) 来生成一个图表,如本页中途所示http://dev.markitondemand.com/

现在我想我必须添加那个js脚本来代替这个小提琴中显示的js(http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/ samples/highcharts/demo/line-basic/),但它似乎不起作用。

我想这可能是因为我没有指定我真正想把它放在哪里,但我不是 100% 确定。

请参阅下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>



<script>
    /**
    * Version 1.1, Jan 2012
    */
    var Markit = {};
    /**
    * Define the TimeseriesService.
    * First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
    * Second argument is duration (int) for how many days of history to retrieve.
    */
    Markit.TimeseriesService = function(symbol,duration){
        this.symbol = symbol;
        this.duration = duration;
        this.PlotChart();
    };

    Markit.TimeseriesService.prototype.PlotChart = function(){

        //Make JSON request for timeseries data
        $.ajax({
            beforeSend:function(){
                $("#chartDemoContainer").text("Loading chart...");
            },
            data: {
                symbol: this.symbol,
                duration: this.duration
            },
            url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
            dataType: "jsonp",
            context: this,
            success: function(json){
             //Catch errors
    if (!json.Data || json.Message){
    console.error("Error: ", json.Message);
    return;
    }
                this.BuildDataAndChart(json);
            },
            error: function(){
                alert("Couldn't generate chart.");
            }
        });
    };

    Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
        var dateDS = json.Data.SeriesDates,
            closeDS = json.Data.Series.close.values,
            openDS = json.Data.Series.open.values,
            closeDSLen = closeDS.length,
            irregularIntervalDS = [];

        /**
    * Build array of arrays of date & price values
    * Market data is inherently irregular and HighCharts doesn't
    * really like irregularity (for axis intervals, anyway)
    */
        for (var i=0; i<closeDSLen;i++){
            var dat = new Date(dateDS[i]);
            var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
            var val = closeDS[i];
            irregularIntervalDS.push([dateIn,val]); 
        }

        //set dataset and chart label
        this.oChartOptions.series[0].data = irregularIntervalDS;
        this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";

        //init chart
        new Highcharts.Chart(this.oChartOptions);
    };

    //Define the HighCharts options
    Markit.TimeseriesService.prototype.oChartOptions = {
    chart: {
    renderTo: 'chartDemoContainer'
    },
    title:{},
    subtitle: {
    text: 'Source: Thomson Reuters DataScope / Markit On Demand'
    },
    xAxis: {
    type: 'datetime'
    },
    yAxis: [{ // left y axis
    title: {
    text: null
    },
    labels: {
    align: 'left',
    x: 3,
    y: 16,
    formatter: function() {
    return Highcharts.numberFormat(this.value, 0);
    }
    },
    showFirstLabel: false
    }, { // right y axis
    linkedTo: 0,
    gridLineWidth: 0,
    opposite: true,
    title: {
    text: null
    },
    labels: {
    align: 'right',
    x: -3,
    y: 16,
    formatter: function() {
    return Highcharts.numberFormat(this.value, 0);
    }
    },
    showFirstLabel: false
    }],
    tooltip: {
    shared: true,
    crosshairs: true
    },
    plotOptions: {
    series: {
    marker: {
    lineWidth: 1
    }
    }
    },
    series: [{
    name: "Close price",
    lineWidth: 2,
    marker: {
    radius: 0
    }
    }]
    //,credits:{ enabled:false },
    };

    new Markit.TimeseriesService("GOOG", 365);

    /**
    * Need help? Visit the API documentation at:
    * http://dev.markitondemand.com
    */
</script>
</head>

<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>

非常感谢您的帮助。

4

1 回答 1

0

在您<div>将 id 更改为#chartDemoContainer

用这些替换你的 jQuery 库,

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

这是您示例的工作版本 - http://jsbin.com/behicetivi/edit?html,output

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>



<script>
    /**
    * Version 1.1, Jan 2012
    */
    var Markit = {};
    /**
    * Define the TimeseriesService.
    * First argument is symbol (string) for the quote. Examples: AAPL, MSFT, JNJ, GOOG.
    * Second argument is duration (int) for how many days of history to retrieve.
    */
    Markit.TimeseriesService = function(symbol,duration){
        this.symbol = symbol;
        this.duration = duration;
        this.PlotChart();
    };

    Markit.TimeseriesService.prototype.PlotChart = function(){

        //Make JSON request for timeseries data
        $.ajax({
            beforeSend:function(){
                $("#chartDemoContainer").text("Loading chart...");
            },
            data: {
                symbol: this.symbol,
                duration: this.duration
            },
            url: "http://dev.markitondemand.com/Api/Timeseries/jsonp",
            dataType: "jsonp",
            context: this,
            success: function(json){
             //Catch errors
    if (!json.Data || json.Message){
    console.error("Error: ", json.Message);
    return;
    }
                this.BuildDataAndChart(json);
            },
            error: function(){
                alert("Couldn't generate chart.");
            }
        });
    };

    Markit.TimeseriesService.prototype.BuildDataAndChart = function(json){
        var dateDS = json.Data.SeriesDates,
            closeDS = json.Data.Series.close.values,
            openDS = json.Data.Series.open.values,
            closeDSLen = closeDS.length,
            irregularIntervalDS = [];

        /**
    * Build array of arrays of date & price values
    * Market data is inherently irregular and HighCharts doesn't
    * really like irregularity (for axis intervals, anyway)
    */
        for (var i=0; i<closeDSLen;i++){
            var dat = new Date(dateDS[i]);
            var dateIn = Date.UTC(dat.getFullYear(), dat.getMonth(), dat.getDate());
            var val = closeDS[i];
            irregularIntervalDS.push([dateIn,val]); 
        }

        //set dataset and chart label
        this.oChartOptions.series[0].data = irregularIntervalDS;
        this.oChartOptions.title.text = "Price History of " + json.Data.Name + " (1 year)";

        //init chart
        new Highcharts.Chart(this.oChartOptions);
    };

    //Define the HighCharts options
    Markit.TimeseriesService.prototype.oChartOptions = {
    chart: {
    renderTo: 'chartDemoContainer'
    },
    title:{},
    subtitle: {
    text: 'Source: Thomson Reuters DataScope / Markit On Demand'
    },
    xAxis: {
    type: 'datetime'
    },
    yAxis: [{ // left y axis
    title: {
    text: null
    },
    labels: {
    align: 'left',
    x: 3,
    y: 16,
    formatter: function() {
    return Highcharts.numberFormat(this.value, 0);
    }
    },
    showFirstLabel: false
    }, { // right y axis
    linkedTo: 0,
    gridLineWidth: 0,
    opposite: true,
    title: {
    text: null
    },
    labels: {
    align: 'right',
    x: -3,
    y: 16,
    formatter: function() {
    return Highcharts.numberFormat(this.value, 0);
    }
    },
    showFirstLabel: false
    }],
    tooltip: {
    shared: true,
    crosshairs: true
    },
    plotOptions: {
    series: {
    marker: {
    lineWidth: 1
    }
    }
    },
    series: [{
    name: "Close price",
    lineWidth: 2,
    marker: {
    radius: 0
    }
    }]
    //,credits:{ enabled:false },
    };

    new Markit.TimeseriesService("GOOG", 365);

    /**
    * Need help? Visit the API documentation at:
    * http://dev.markitondemand.com
    */
</script>
</head>

<body>

<div id="chartDemoContainer" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>
</html>
于 2016-04-04T01:35:45.673 回答