如何在高库存基线图上绘制多条线

how to enable drawing multiple lines on highstock basic-line graph?

本文关键字：绘制 高库存 基线      更新时间：2023-09-26

我想为库中的这种类型的图形绘制多条线:http://www.highcharts.com/stock/demo/basic-line

我在网上找到了这个例子:http://jsfiddle.net/yildirim_timur/Hb3Q7/

下面可以看到我的html文件。我试着做了几件事，但都做不到。我怎样才能使我的图表能够绘制多条线?(这是一个iPad应用项目)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Senior Project Timur Aykut YILDIRIM - IH Technology</title>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
        <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="/Users/ihtechnology/Desktop/chart_deneme/css/result-light.css">
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
        <script type='text/javascript'>
            var serviceDataURL = "http://xx.xx.xxx.xxx:83/get_item_data_ios?generic=";
            function setDictionary(x){
                return x;
            } // no need for this method
            var dict = "web service query string will be here";
            $(function() {
                $.getJSON(serviceDataURL.concat(dict), function(data) {
                    // Create the chart
                    window.chart = new Highcharts.StockChart({
                        chart : {
                            renderTo : 'container'
                        },
                        navigation: {
                            buttonOptions: {
                                enabled: false,
                                width: 60
                            }
                        },
                        rangeSelector : {
                            buttonSpacing: 20,
                            buttonTheme: { // styles for Q,Y,YTD,ALL buttons
                                fill: 'none',
                                stroke: 'none',
                                'stroke-width': 15,
                                style: {
                                    color: '#039',
                                    fontWeight: 'bold'
                                },
                                states: {
                                    hover: {},
                                    select: {
                                        fill: '#039',
                                            style: {
                                                color: 'white'
                                            }
                                    }
                                }
                            },
                            selected : 3, // 3=ALL buton at first
                            inputDateFormat: '%Y-%m-%d',
                            inputEditDateFormat: '%Y-%m-%d',
                            buttons:[
                                {
                                    type: 'month',
                                    count: 3,
                                    text: 'QQ'
                                },
                                {
                                    type: 'year',
                                    count: 1,
                                    text: 'YY'
                                },
                                {
                                    type: 'ytd',
                                    text: 'YTD'
                                },
                                {
                                    type: 'all',
                                    text: 'ALL'
                                },
                            ]
                        },
                        title : {
                            text : 'My Total Market'
                        },
                        credits: {
                            text: " ",
                            href: " ",
                        },
                        series : [{
                            name : 'Total Market',
                            data : arr,
                            tooltip: {
                                valueDecimals: 2
                            }
                        }],
                        exporting: {
                            enabled: false
                        }
                    }, function(chart){
                            // apply the date pickers
                            setTimeout(function(){
                                $('input.highcharts-range-selector').attr('readonly',1); // burda webviewı engelledik
                                $('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
                            },0)
                        });
                });
            });
                //]]>
        </script>
    </head>
    <body>
        <div id="container" style="height: 500px; min-width: 500px;"></div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    </body>
</html>

现在你有:

                    series : [{
                        name : 'Total Market',
                        data : arr,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]

所以在series里面只有一个对象。如果你想要多个级数那么应该像这样:

                    series : [{
                        name : 'Total Market I',
                        data : arr_1,
                        tooltip: {
                            valueDecimals: 2
                        }
                    },{
                        name : 'Total Market II',
                        data : arr_2,
                        tooltip: {
                            valueDecimals: 2
                        }
                    }]
编辑:

要添加多个序列，将它们推入数组:

var mySeries = [];
mySeries.push({
    name : 'Total Market I',
    data : arr_1
});
mySeries.push({
    name : 'Total Market II',
    data : arr_2
});
mySeries.push({
    name : 'Total Market III',
    data : arr_3
});

创建图表:

series: mySeries
相关文章：