Highcharts: Line graph with half solid line and half dotted line?

后端未结

关注

 5  1117

I\'m trying to show a time series line graph in highcharts - to the left of center is historical data, so the line needs to be solid. To the right of center is predicted da

相关标签:

5条回答

野性不改

2020-12-28 09:25

Yes solid and dashed lines in one line graph is possible .I have implemented it using a java program to create my data for series .

Create two series

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
                                            }

                                        }
}

Consider these points 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

From 1 -5 its dashed line . From 5-10 its dotted Line . From 10-15 its dashed line again . Consider some sample X axis Values as you wish.

This is the java logic to create two series data points : -

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.

Send this two list as json to Jsp or HTMl page and assign it to data of both the series .

Here is a sample i created .Please save this code in an HTMl file As 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>

I am posting the sample json in Jsfiddle here: https://jsfiddle.net/t95r60fc/

Save this json as json1.json and keep it in same directory as Chart.html and open the html in browser as given below :

file:///C:/temp/Chart.html?json=C:/temp/json1.json?callback=jsonCallback

Final output will be like this :

0 讨论(0)

借酒劲吻你

2020-12-28 09:33

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'
    }]
});

Result :-

jsfiddle.net/7c9929mg

0 讨论(0)

一个人的身影

2020-12-28 09:38
I don't think you can have two different kind of line style in one series, but you can split the series into two, then specify the x coordinates for the second series to start where the first left off. Then you can set the dashStyle of that line.
```
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'
        }]
```
Here's a JSFiddle illustrating it: http://jsfiddle.net/mkremer90/zMZEV/1/
0 讨论(0)
发布评论:

提交评论
- 加载中...

栀梦

2020-12-28 09:42

Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.

Examples

Different colors by y-axis value

$(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>

Different dash styles by x-axis position

$(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>

0 讨论(0)

感情败类

2020-12-28 09:42

Yes. This is possible. Hard to picture your chart but what you could have is 2 series. One is your real data and the other is the predicted/future data. To set the line style use dashStyle.

0 讨论(0)
发布评论:

提交评论
- 加载中...