ハイチャート、2つのデータセットを同じ線グラフに表示

Question

私はHighChartsを使用するスクリプトを作成しています。 JSON形式で結果を生成して出力するスクリプトを作成しました。以下を参照してください。

[{"name":"Month","data":["Jan","Feb","Mar","Apr","May"]},{"name":"Rooms","data":[140,77,76,1,1]},{"name":"Target","data":["155"]}] 

JSONには、月、月、合計の3つの部分があります。私がしようとしているのは、毎月のデータを折れ線グラフとして表示することです。 これは私が働いていますが、ターゲットデータを同じグラフ上の線として表示したいと思います。

ターゲットのデータを表示する方法を教えてください。

JSONデータを呼び出すスクリプトも作成しました。以下を参照してください。

$(function() { 

var categories=[]; 
var data2 =[]; 
var targetValue = null; 


var chart; 
$(document).ready(function() { 
    $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
    $.each(json,function(i,el) { 
     if (el.name == "Month") { 
     categories = el.data; 
     } else if (el.name == "Target") { 
     targetValue = el.data[0]; 
     } else { 
     data2.push(el); 
     } 
    }); 


    $('#container1').highcharts({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginTop: 40, 
     marginRight: 30, 
      marginBottom: 50, 
     plotBackgroundColor: '#FCFFC5' 
     }, 

title: { 
     text: 'Monthly audits <?php echo $year;?>', 
     x: -20, //center 
    style: { 
      fontFamily: 'Tahoma', 
    color: '#000000', 
      fontWeight: 'bold', 
    fontSize: '10px' 
     } 
    }, 

    subtitle: { 
     text: '', 
     x: -20 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    yAxis: { 

       showFirstLabel: false, 
       lineColor:'#999', 
       lineWidth:1, 
       tickColor:'#666', 
       tickWidth:1, 
       tickLength:2, 
       tickInterval: 10, 
       gridLineColor:'#ddd', 
       title: { 
        text: '', 
        style: { 
       fontFamily: 'Tahoma', 
       color: '#000000', 
       fontWeight: 'bold', 
       fontSize: '10px' 
       } 
       }, 
       plotLines: [{ 
        color: '#FF0000', 
        value: targetValue, 
        label: { 
         text: 'Target', 
         style: { 
          color: '#FF0000' 
         } 
        } 
       }] 
       }, 
    legend: { 
    enabled: false, 
     itemStyle: { 
     font: '11px Trebuchet MS, Verdana, sans-serif', 
     color: '#000000' 
    }, 
      itemHoverStyle: { 
      color: '#000000' 
      }, 
      itemHiddenStyle: { 
      color: '#444' 
      } 

    }, 

plotOptions: { 
    column: { 
      color:'#ff00ff' 
    }, 

series: { 
      dataLabels: { 
      enabled: true, 
      color: '#000000', 
      align: 'center', 
      y: 0, 
      style: { 
      fontSize: '10px', 
      fontFamily: 'Verdana, sans-serif' 
      } 
     } 
     } 
}, 

credits: { 
     enabled: false 
}, 

    series: data2 
     }); 
    }); 

}); 

}); 

お時間をいただきありがとうございます。

Answer 1

ターゲット値を表示するには、 'plotLine'-Featureを使用することをお勧めします。これにより、あなたの軸のいずれかに線が追加され、プロット線を使用するための最良の例があなたの必要条件であるようです。まず、あなたはJSONを処理するために、あなたのコードを更新する必要があるWebサービスから返さ：

$(function() { 

    var categories=[]; 
    var data2 =[]; 
    var targetValue = null; 

    var chart; 
    $(document).ready(function() { 
     $.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) { 
     $.each(json,function(i,el) { 
      if (el.name == "Month") { 
      categories = el.data; 
      } else if (el.name == "Target") { 
      targetValue = el.data[0]; 
      } else { 
      data2.push(el); 
      } 
    }); 

    [...] 

を今、我々は変数targetValueに目標値を持っています。これは、今、Y軸用の新しいplotLineを作成するために、highcharts構成に挿入されます。

yAxis: { 
    plotLines: [{ 
    color: '#FF0000', 
    value: targetValue, 
    label: { 
     text: 'Target', 
     style: { 
     color: '#FF0000' 
     } 
    } 
    }], 
    minRange: targetValue, // to ensure the plotLine is always visible 
    [...] 
}, 

これは、この中のように左に赤ラベル「ターゲット」添付た指定targetValueで赤い線が追加されます例：あなたは、合計を表示する必要がある単一のポイントを持っている場合は

https://jsfiddle.net/doc_snyder/2spmxtwa/1/