2016-09-21 4 views
0

ハイチャートにスプラインチャートがあります。それは24時間、すなわち24ポイントのデータを有する。今24時間の間に、スプライン・チャート上にポイントとして表示する必要のあるインシデントがあります。そして、それらのポイントのためのツールチップが必要です。どのように私はツールチップを含むスプライングラフ上でこれらの点を重ねるのですか?そして、これらの重なり合った点は、x軸上の対応する時間にもマッピングされる必要がある。これができればどんなアイデアですか?ハイチャートのスプラインチャート上のデータの重複

これは私がJSfiddleで何をしたいの例です: - たとえば http://jsfiddle.net/ttyc5dod/

$(function() { 
$('#container').highcharts({ 
    title: { 
     text: 'Test Graph', 
     x: -20 //center 
    }, 
    xAxis: { 
     categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24] 
    }, 
    yAxis: { 
     title: { 
      text: 'Availability(%)' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
    }, 
    tooltip: { 
     valueSuffix: '°C' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     borderWidth: 0 
    }, 
    series: [{ 
     name: 'Data', 
     data: [7.0, 6.9, 9.5, 10, 11.2, 12.5, 15.2, 16.5, 13.3, 18.3, 13.9, 9.6, 12, 13, 12, 11.2, 9, 8, 5, 12, 14, 12, 12, 12.5, 10] 
    }] 
}); 
}); 

、次の例では、時間午前23時と24:00時間の間、のは、仮定しましょうこのグラフに表示する必要があるインシデント(issue)が発生します。 23:00から24:00の間にこのグラフ上にポイントをプロットしてインシデントを表示し、インシデントの詳細を示すツールチップを表示する必要があります。

何か助けになります。

+0

私はわかりませんあなたが達成したいもの。問題に関するより具体的な情報を投稿してください。例えば、あなたが達成したいことを示す描画? –

+0

@GrzegorzBlachliński私は質問を更新しました。 –

+0

あなたのポイント間で情報を得る方法はたくさんあります。例えば、それらの間にカラムを追加することができます:http://jsfiddle.net/ttyc5dod/2/最終バージョンでどのようにあなたのチャートを見たいか分かりません –

答えて

1

インパクトが発生した場合は、新しいシリーズを追加できます(スキャッタシリーズが最適です)、データポイント間に散布ポイントを追加することができます。

最初のシリーズのラインに散布ポイントを追加する場合は、このポイントの右の位置を簡単に計算する必要があります。

ここでは、2点間に、あなたのラインに散布ポイントを追加するのは非常に簡単な例を見ることができます:

ここ
function(chart) { 
    var value1 = chart.series[1].data[23].y, 
     value2 = chart.series[1].data[24].y; 
    chart.series[0].addPoint({ 
     x: 23.5, 
     y: (value1 + value2)/2, 
     details: 'this is an accident' 
    }); 
    } 

あなたはそれが動作する方法の例を見ることができます: http://jsfiddle.net/ttyc5dod/3/

+0

これは私にとって完璧に機能します。 Grzegorzを助けてくれてありがとう。私の問題を解決しました。 :) –

関連する問題