Highcharts：半实线线图和半虚线？(Highcharts: Line graph with

2019-07-21 05:59发布

站内文章 / 移动开发
90 0 0

我试图显示highcharts时间序列线图 - 到中心的左边是历史数据，因此线必须是固体。 到中心的右侧被预测数据，因此，线需要被点缀或虚线。 这可能吗？

谢谢！

Answer 1:

是的，你可以使用区 。 区让你同样的数据序列内的应用不同的样式，并且可以针对沿x轴和y轴的应用。

例子

  1. 不同的颜色由y轴值 

 $(function() { $('#container').highcharts({ series: [{ data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5], zones: [{ value: 0, color: '#f7a35c', style: 'dotted', }, { value: 10, color: '#7cb5ec' }, { color: '#90ed7d' }, ] }] }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div>

  1. 不同样式破折号由x轴位置 

 $(function() { $('#container').highcharts({ title: { text: 'Zone with dash style' }, subtitle: { text: 'Dotted line typically signifies prognosis' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], zoneAxis: 'x', zones: [{ value: 8 }, { dashStyle: 'dot' }] }] }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>



Answer 2:

我不认为你可以有两种不同类型的线条样式在一个系列，但您可以在系列一分为二，然后指定x坐标的第二个系列，开始第一个离开的地方。 然后，你可以设置dashStyle该行的。 

series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
        }, {
            name: 'New York',
            data: [{x: 5, y: 21.5}, {x: 6, y: 22.0}, {x: 7, y: 24.8}, {x: 8, y: 24.1}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
            dashStyle: 'dash'
        }]

这里有一个的jsfiddle说明它： http://jsfiddle.net/mkremer90/zMZEV/1/



Answer 3:

是。 这个有可能。 很难想像你的图表，但你可以有为2系列。 一个是你的真实数据，另一个是预测/未来的数据。 要设置线条样式使用dashStyle 。



Answer 4:

在一个线图是实线和虚线是可能的。我已经使用Java程序来创建我的系列数据来实现它。

创建两个系列

series : [
                                        {
                                            name : 'Series 1',
                                            id : 'series1',
                                            data : mydashData,
                                            allowPointSelect : true,
                                            marker: {
                                                enabled: false
                                            }

                                        },
                                        {
                                            name : 'Series 2',
                                            data : myDotData,
                                            dashStyle : 'dot',
                                            id : 'series2',
                                            color : '#A81F40',
                                            allowPointSelect : true,
                                            marker: {
                                                enabled: false
                                            }

                                        }
}

考虑这些点1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

从1-5的虚线。 从5-10的虚线。 从10-15再度其虚线。 考虑到一些样本X轴值，如你所愿。

这是java的逻辑来创建两个系列的数据点： - 

List dashList;
List dotList;

Initial = FirstPoint ;

LOOP
if Initial == Dash and LastParsedPoint = Dash 
 add to DashList corresponding to that X axis value

if Initial ==Dot and LastParsePoint = Dot
 add to DotList corresponding to that X axis value

if Initial == Dot and LastParsePoint =Dash
 add to DashList Y and X values
 add to DashList y =NULL and same X value
 add to DotList  y and X value.

if Initial =Dash and LastParsePoint =Dot
 add to DotList  Y and X values
 add to DotList  Y =NULL and same X value
 add to DashList  Y and X value.


LastParsePoint =Initial

END LOOP.

发送这两个列表作为JSON到JSP或者HTML页面，并将其分配给两个系列的数据。

下面是我创建的。请保存此代码的HTML文件作为Chart.html样本

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.9.0.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var colors = Highcharts.getOptions().colors;
    var pathname = window.location.pathname;
    //console.log(pathname);
    var containerName = 1;

    /*Creates a div element by passing index name and class*/
    function create_div_dynamic(i, id, className) {

        dv = document.createElement('div'); // create dynamically div tag
        dv.setAttribute('id', id + i); //give id to it
        dv.className = className; // set the style classname
        //set the inner styling of the div tag
        dv.style.margin = "0px auto";
        if (id == 'container') {
            //hr = document.createElement('hr');
            //br = document.createElement('br');//Break after Each Chart Container and Horizontal Rule.
            //document.body.appendChild(br);
            //document.body.appendChild(hr);
        }
        document.body.appendChild(dv);
    }

    /*Creates a span element by passing index name and class*/
    function create_span_dynamic(i, id, className) {

        dv = document.createElement('span'); // create dynamically div tag
        dv.setAttribute('id', id + i); //append id to to name
        dv.className = className; // set the style classname
        //set the inner styling of the span tag
        dv.style.margin = "0px auto";
        document.body.appendChild(dv);
    }


    /*Get URL Parameters*/
    function getUrlParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++)
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam)
            {
                return sParameterName[1];
            }
        }
    }

    $(document).ready(function() {
        var json = getUrlParameter('json');
              $.ajax({
                    type: 'GET',
                    url: json,
                    dataType: 'jsonp',
                    jsonpCallback: 'jsonCallback',
                    async: false,
                    contentType: "application/json",
                    success: function (datas){
            //Each data table column/block index.
                var blockNumber = 0;
                //Each Row inside block index
                var rowNumber = 0;
                //Used to store previous charts row index for blank divs generation
                var prevRowNum=0;

                //Number of blank divs created .
                var oldC=0;

                //J : Chart Index
                for (j = 0; j < 2; j++) {
                    for ( var key in datas.root[j]) {
                        var solid = [];
                        var dot = [];

                        for (i = 0; i < datas.root[j][key][0].solid.length; i++) {
                            solid.push([parseInt(datas.root[j][key][0].solid[i].date),parseFloat(datas.root[j][key][0].solid[i].value)|| null ]);
                        }

                        for (i = 0; i < datas.root[j][key][0].dot.length; i++) {
                            dot.push([parseInt(datas.root[j][key][0].dot[i].date),parseFloat(datas.root[j][key][0].dot[i].value)|| null ]);
                        }
                        var chartBlock = '';

                        var k = j;

                        //Container Name
                        var renderCont = 'container'+ ++j;
                        create_div_dynamic(j,'container','image-capture-container');


                        //Creating Charts
                        this['chart_' + j] = new Highcharts.Chart(
                        {
                            chart : {
                                    renderTo : renderCont,
                                    type : 'line',
                                    zoomType : 'xy',
                                    borderWidth : 0,
                                    borderColor : '#ffffff',
                                    borderRadius : 0,
                                    width : 600,
                                    height : 400,

                                    plotShadow : false,
                                    alignTicks :true,
                                    plotBackgroundColor:'#C0C4C9',
                                    //margin: [15, 10, 40,60],
                                    style : {
                                            //position : 'relative',
                                            opacity : 100,
                                            textAlign : 'center'
                                            }
                                    },
                            xAxis : {
                                        useHTML : true,
                                        type : 'datetime',
                                        lineColor: '#ffffff',

                                        tickInterval:30 * 24 * 3600 * 1000,
                                        tickColor: '#000000',
                                        tickWidth: 1,
                                        tickLength: 5
                                    },
                            yAxis : {
                                        title : {
                                                useHTML :'true',
                                                align : 'high',
                                                offset:0,
                                                rotation: 0,
                                                y: 1,
                                                x:-4,
                                                },
                                            lineWidth : 1,
                                            gridLineWidth :2,
                                            minorGridLineWidth : 1,
                                            gridLineColor :'#FFFFFF',
                                            lineColor:'DarkGray',
                                            opposite : false,
                                            maxPadding: 0.2,
                                        labels : {
                                                align : 'right',
                                                x : -5
                                            }
                                    },
                            series : [
                                        {
                                            name : 'Solid Line',
                                            id : 'series1',
                                            data : solid,
                                            allowPointSelect : true,
                                            color : '#888888',
                                            marker: {
                                                enabled: false
                                            }

                                        },
                                        {
                                            name : 'Dashed',
                                            data : dot,
                                            dashStyle : 'dot',
                                            id : 'series2',
                                            color : '#666666',
                                            allowPointSelect : true,
                                            marker: {
                                                enabled: false
                                            }

                                        }
                                    ]
                        });
                        create_div_dynamic(j,'main','main');
                        var main = 'main'+ j;
                        var chartDiv = $('#'+renderCont).children(":first").attr('id');
                        //console.log(chartDiv);
                        create_div_dynamic(j,'title_div','title_div');
                        $('#' + main).append($('#'+ chartDiv));
                        $('#' + renderCont).append($('#'+ main));
                }
            } //End of Each Chart Loop
        }
    });
    });
</script>
</head>
<body id="mainBody">
</body>
</html>

我在这里张贴在的jsfiddle样品JSON： https://jsfiddle.net/t95r60fc/

保存此JSON作为json1.json并将其保存在同一目录Chart.html并打开浏览器的HTML下面给出：

文件：/// C：/temp/Chart.html JSON = C：？？/temp/json1.json回调= jsonCallback

最终的输出是这样的：



Answer 5:

var envelopBorder =[[-20, 63], [-20, 85], null, null,null,null,[19, 130], [35,150], [60,150],[65,148], [80,140],[80,100],[65,82],[55,70],[40,67],[20,63],[15,63],[-20,63]] ;

var dasshedBorder =[[-20, 85],[-20, 100],[1, 130],[19, 130]] ;

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Operating Envelop'
    },
        xAxis: {
        title: {
            enabled: true,
            text: 'Evaporating Temperature (°F)'
        },

        gridLineWidth: 0,
        lineWidth:1,
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'Normal',
        data: envelopBorder
    }, {
        name: 'Dash',
        data: dasshedBorder,
        dashStyle: 'dash'
    }]
});

结果： -

jsfiddle.net/7c9929mg



文章来源: Highcharts: Line graph with half solid line and half dotted line?
标签： highcharts
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~