Highcharts - HighChartsナビゲータ用の特定のカラーゾーン

Question

ハイチャートナビゲータにカラーゾーンを追加する方法はありますか？ゾーン間にない場合は、デフォルトの色を使用する必要があります。何か、この値からこの値にこの色があり、そうでなければ青です。

基本的に、開始日と終了日と特定の色のレポート期間があります。ハイチャートナビゲーターにそれぞれのレポート期間がそれぞれの色で表示されるようにしたいと思います。ゾーンを使用していますが、レポート期間がないゾーンでは、次のゾーンの色が使用されます。

これは現在のようです。

そして、ここではコードです：

const zones = reportingPeriods.map((rp, i) => { 
    return { 
     value: new Date(rp.endDate), 
     color: rp.color 
    } 
}) 

const seriesData = _.map(graphData, (metricData, key) => { 
    return { 
     name: key, 
     data: metricData.sort(function(a, b) { 
      return a[0] - b[0]; 
     }), 

     zoneAxis: 'x', 
     zones: zones, 
     tooltip: { 
      valueDecimals: 0 
     }, 

     visible: false 
    } 
}) 

const graphOptions = { 
    rangeSelector: { 
     selected: 1 
    }, 
    navigator: { 
     maskFill: 'rgba(0, 0, 0, 0.25)' 
    }, 
    backgroundColor: { 
     linearGradient: [0, 0, 500, 500], 
     stops: [ 
      [0, 'rgb(255, 255, 255)'], 
      [1, 'rgb(200, 200, 255)'] 
     ] 
    }, 
    title: { 
     text: group.groupName 
    }, 
    series: seriesData, 
    credits: false, 
    legend: { 
     enabled: true 
    } 
} 

あなたはゾーンの開始と終了ポイントを定義することができます方法はありますか？また、厳密にナビゲータに色付けを制限しますか？

ゾーンは次のように定義することができれば理想的には、それはいいだろう：右方向に

from: rp.startDate, 
to: rp.endDate, 
color: rp.color 

任意のプッシュをいただければ幸いです。

Answer 1

私は以下の質問に答えました。 Here is the TLDR fiddle example。

ゾーンの開始点と終了点を定義する方法はありますか？

あなたが提案した形式は無効ですが、回避策は、必要な「デフォルトの色」を使用して領域を空白で埋めることです。これは、あなたのmapをもっと精巧な機能に変更することを意味します。たとえば：

periods = [ 
    { start: 2, end: 5, color: 'green' }, 
    { start: 5, end: 7, color: 'pink' }, 
    { start: 10, end: 15, color: 'red' }, 
    { start: 19, end: 21, color: 'yellow' } 
]; 

defaultColor = 'black'; 
zones = []; 

for(var i = 0; i < periods.length; i++) { 
    // This zone is a "in-between" zone to fill the blanks. 
    zones.push({ 
    value: periods[i].start, 
    color: defaultColor 
    }); 

    // This zone is an actual period 
    zones.push({ 
    value: periods[i].end, 
    color: periods[i].color 
    }); 
} 

// This zone is cover the values from your last period to infinity 
zones.push({ 
    color: defaultColor 
}); 

ここで私はperiods配列は、あなたのシリーズに適用される最終製品であるためにあなたのreportingPeriodsとzones配列に一致するように想像してみてください。

また、厳密にナビゲータに色付けを制限しますか？

ゾーンをナビゲータに適用するには、単にnavigator.seriesオブジェクトを使用します。例：

navigator: { 
    series: { 
    type: 'line', 
    zones: zones 
    } 
} 

実際のシリーズには適用されません。