chengnan
/
s202226701001


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!DOCTYPE HTML>
<html>
<head>
    <title>Graph2d | Both Axis Example</title>
    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
    <script src="../../dist/vis.js"></script>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .custom-style1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .custom-style2 {
            fill: #00a0f2;
            stroke-width:2px;
            stroke: #050092;
        }

        .custom-style3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.custom-style3.vis-fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
    </style>

</head>
<body>
<h2>Graph2d | Both Axis Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
    This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
    We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
    have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
    in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.


</div>
<br />
<div id="visualization"></div>

<script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
                size: 10
            }
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: false
        }
    });

    groups.add({
        id: 3,
        content: names[3],
        className: 'custom-style3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

    var container = document.getElementById('visualization');
    var items = [
        {x: '2014-06-12', y: 0 , group: 0},
        {x: '2014-06-13', y: 30, group: 0},
        {x: '2014-06-14', y: 10, group: 0},
        {x: '2014-06-15', y: 15, group: 1},
        {x: '2014-06-16', y: 30, group: 1},
        {x: '2014-06-17', y: 10, group: 1},
        {x: '2014-06-18', y: 15, group: 1},
        {x: '2014-06-19', y: 52, group: 1},
        {x: '2014-06-20', y: 10, group: 1},
        {x: '2014-06-21', y: 20, group: 2},
        {x: '2014-06-22', y: 600, group: 2},
        {x: '2014-06-23', y: 100, group: 2},
        {x: '2014-06-24', y: 250, group: 2},
        {x: '2014-06-25', y: 300, group: 2},
        {x: '2014-06-26', y: 200, group: 3},
        {x: '2014-06-27', y: 600, group: 3},
        {x: '2014-06-28', y: 1000, group: 3},
        {x: '2014-06-29', y: 250, group: 3},
        {x: '2014-06-30', y: 300, group: 3}
    ];

    var dataset = new vis.DataSet(items);
    var options = {
        dataAxis: {showMinorLabels: false},
        legend: {left:{position:"bottom-left"}},
        start: '2014-06-09',
        end: '2014-07-03'
    };
    var graph2d = new vis.Graph2d(container, dataset, groups, options);

</script>
</body>
</html>