2017-01-27 12 views
0

Angular JSを使用してグラフの一日のオフィスのタイミング(イン/アウト時間)をプロットする必要があります。私は10で、オフィスに達し、その後1で昼食のために出てきた例えばStacked Highcharts - 与えられた点をプロットしてスタックブロックから色を取り除く方法

は、再びいくつかの作業のために午前2時30分に出て、その後2とで来たというように.....

ので、グラフでは、y軸は10から6までの時間を表示する必要があります。グラフ上に時間をプロットする必要があります.1の場合は10、次に1の場合は2、次に2の場合は2:30など...

私の質問は:

1)これは単一のバーで達成できますか?

2)積み上げられたハイチャートを使用していますが、積み重ねられたチャートがポイントを追加しているので、2つのデータの差を送っていますので、最初に10を送り、もう1つは1を指します。そういうわけで、それはブロック全体を色で塗りつぶします。たとえば、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/
関連する問題