2017-01-27 1 views
0

Angular JS를 사용하여 그래프의 하루 중 사무실 타이밍 (시작 및 종료 시간)을 그려야합니다. 나는 10시에 사무실에 도달 한 후 1에서 점심 식사를 위해 밖으로 갔다 예를 들어Stacked Highcharts - 주어진 점을 그려서 스택 블록에서 색을 제거하는 방법

은 다시 몇 가지 작업을 위해 2시 30 분 나간 다음 2에왔다 등등 .....

그래서 그래프에서 y 축은 10에서 6까지의 시간을 보여야하고 1에서 10을 가리키고 1을, 2를, 그리고 2를 30과 같이 그래프에 시간을 표시해야합니다.

내 질문은 다음과 같습니다 :

1) 어떤 그래프를 사용하면 하나의 막대에서이를 얻을 수 있습니까?

2) 누적 된 차트를 사용하고 있지만 누적 차트가 포인트를 추가하기 때문에 두 데이터의 차이점을 전송하므로 먼저 10을 보내고 다른 하나는 1을 가리키고 3을 전송합니다. 그래서 on ...하지만, 전체 블록을 색상으로 채 웁니다. 10-1 한 색상, 1-2 한 색상 등 ..., 필요한 것은, 먼저 10을 가리키고 1을 가리켜 야합니다. , 2시에 ... 그리고 어떤 색으로도 채워서는 안됩니다. https://plnkr.co/edit/CgnFfTbJ3BkyjHzErQGk?p=preview

하지만 내가 달성하고자하는 것은 도와주세요이

enter image description here

같은 것입니다 : 내가 지금까지 달성 한 무엇

이다.

또한 아래의 코드를 확인할 수 있습니다 : 여기

<html> 
<head> 
<title>Highcharts Tutorial</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
</head> 
<body> 
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"> </div> 
<script language="JavaScript"> 
$(document).ready(function() { 
    var chart = { 
    type: 'column' 
    }; 
    var title = { 
    text: 'Stacked column chart' 
    };  
var xAxis = { 
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
}; 
var yAxis ={ 
    min: 10, 
    max:18, 
    tickInterval:1, 
    title: { 
    text: 'Total fruit consumption' 
    }, 
    stackLabels: { 
    enabled: false, 
    style: { 
     fontWeight: 'bold', 
     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
    } 
    } 
    }; 
    var legend = { 
    enabled:false 
    }; 
    var tooltip = { 
    enabled:false 
    }; 
    var plotOptions = { 
    column: { 
     stacking: 'normal', 
     dataLabels: { 
      enabled: false, 
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
      style: { 
      textShadow: '0 0 3px black' 
      } 
     } 
     } 
    }; 
    var credits = { 
     enabled: false 
    }; 
    var series= [ 

     { name: 'John', 
     data: [1] 
     }, 
     { name: 'John', 
     data: [0.5] 
     }, 
     { name: 'John', 
     data: [1] 
     }, 
     { 
     name: 'Jane', 
     data: [3] 
     }, { 
     name: 'Joe', 
     data: [10]  
     }];  

    var json = {}; 
    json.chart = chart; 
    json.title = title; 
    json.xAxis = xAxis; 
    json.yAxis = yAxis; 
    json.legend = legend; 
    json.tooltip = tooltip; 
    json.plotOptions = plotOptions; 
    json.credits = credits; 
    json.series = series; 
    $('#container').highcharts(json); 

    }); 
    </script> 
    </body> 
    </html> 

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

답변

3

columnrange 시리즈를 이용한 예이다.

라이브 예 : https://jsfiddle.net/mzb3bpg2/

const options = { 
    chart: { 
    type: 'columnrange' 
    }, 
    series: [{ 
    name: 'Temperatures', 
    data: [{ 
     borderWidth: 2, 
     borderColor: Highcharts.getOptions().colors[1], 
     color: 'rgba(0,0,0,0)', 
     x: 0, 
     low: 0, 
     high: 10 
    }, { 
     borderWidth: 2, 
     borderColor: Highcharts.getOptions().colors[1], 
     color: 'rgba(0,0,0,0)', 
     x: 0, 
     low: 10, 
     high: 16 
    }, { 
     borderWidth: 2, 
     borderColor: Highcharts.getOptions().colors[1], 
     color: 'rgba(0,0,0,0)', 
     x: 0, 
     low: 16, 
     high: 20 
    }] 
    }] 
} 

const chart = Highcharts.chart('container', options); 

enter image description here

[EDIT]

더 완전한 하나 enter image description here

라이브 예 : https://jsfiddle.net/fzv2jd3c/