2016-06-28 40 views
0

flotとjQueryを使用して、ターゲットラインを持つ棒グラフを作成しようとしています。棒グラフと線グラフを描画する

ターゲットは、データが上下に移動しながら、毎月同じままです。私は問題なくバーを作成できますが、私はその行を表示することはできません。あなたはlinesオプションを囲むているあなたのdatasetsアレイでは

https://jsfiddle.net/bigbadbaboonboy/r7j0k9gz/

<div id="risla-graph" class="graph"></div> 

#risla-graph { 
margin: 0 auto; 
text-align: center; 
width: 80%; 
height: 400px; 
} 

var datasets = [{"label":"ALL RiSLA","data":[{"0":1451606400000,"1":73.83}, 
{"0":1454284800000,"1":69.21},{"0":1456790400000,"1":88.33}, 
{"0":1459465200000,"1":85.99},{"0":1462057200000,"1":82.32}, 
{"0":1464735600000,"1":0}],"series":{"lines":{"show":false}},"idx":0}, 
{"label":"Target","color":"#006E2E","data":[{"0":1451606400000,"1":92}, 
{"0":1454284800000,"1":92},{"0":1456790400000,"1":92}, 
{"0":1459465200000,"1":92},{"0":1462057200000,"1":92}, 
{"0":1464735600000,"1":0}],"series":{"lines": 
{"show":true,"steps":true,"linewidth":1}},"bars":{"show":false},"legend": 
{"show":false},"idx":1}]; 

var options = {"series":{"stack":0,"lines": 
{"show":false,"steps":false},"bars":{"show":true,"fill":1,"align":"center" 
,"lineWidth":0,"barWidth":518400000.0000001}} 
,"xaxis":{"mode":"time","timeformat":"%b %y" 
,"tickSize":[1,"month"]},"yaxis":{"min":64.21,"max":97} 
,"grid":{"clickable":true,"hoverable":true},"legend":{"show":false}}; 

plot = $.plot($('#risla-graph'), datasets, options); 

答えて

0

:私はここに私の問題を引き起こしているコードをアップロードした

を欠けているかわからないんだけどseriesオブジェクトにあります。

series: { 
    lines: { 
     show: true, 
     steps: true, 
     linewidth:1 
    } 
} 

データオブジェクトの行のオプションを指定する正しい方法は、(Flot's api.mdあたり)seriesオブジェクトなしです:

{ 
    color: color or number 
    data: rawdata 
    label: string 
    lines: specific lines options 
    bars: specific bars options 
    points: specific points options 
    xaxis: number 
    yaxis: number 
    clickable: boolean 
    hoverable: boolean 
    shadowSize: number 
    highlightColor: color or number 
} 

私はあなたのJSFiddleが動作するように更新しました。

+0

ありがとうございます。シリーズを取り上げることは、目標ラインを持ち上げるのを助けた。 – bigbadbaboonboy

0

あなたoptionsから

"lines": {"show": false, "steps": false} 

を削除します。

fiddleが更新されました。

+0

ありがとうございます。これはあまりにもうまくいったが、私はラインを踏み出す必要があったので、私はメッヘンビエのソリューションを使用した。 – bigbadbaboonboy

関連する問題