2014-02-11 59 views
1

Highcharts箱線圖具有奇妙的功能,當2系列'在x軸的同一點上時,可以抵消箱形圖。我的問題是,我也有一個趨勢線沿着與箱形圖相關的中位數,但是它的數據點沒有與箱形圖相抵消。有沒有一種方法可以將相同的調整應用於箱形圖的線條系列?我需要確保無論他們排隊圖表大小,數據點的數量最多等隨着多個箱型圖/中間趨勢線系列',線條點不符合箱線

jsfiddle example

 series: [{ 
     name: "1st Series", 
     data: [ 
      [1352959200000, 1.38, 1.38, 1.44, 1.59, 1.59], 
      [1355551200000, 1.39, 1.39, 1.48, 1.63, 1.63], 
      [1358229600000, 1.41, 1.41, 1.5, 1.6, 1.6], 
      [1360908000000, 1.37, 1.37, 1.52, 1.61, 1.61], 
      [1363323600000, 1.47, 1.47, 1.5, 1.66, 1.66], 
      [1366002000000, 1.33, 1.33, 1.47, 1.62, 1.62], 
      [1368594000000, 1.26, 1.26, 1.46, 1.54, 1.54], 
      [1371272400000, 1.14, 1.14, 1.26, 1.43, 1.43], 
      [1373864400000, 1.21, 1.21, 1.28, 1.35, 1.35], 
      [1376542800000, 1.31, 1.31, 1.33, 1.46, 1.46], 
      [1379221200000, 1.31, 1.31, 1.33, 1.46, 1.46], 
      [1381813200000, 1.33, 1.33, 1.41, 1.67, 1.67] 
     ] 
    }, { 
     name: "1st Series Median Trend", 
     type: "spline", 
     linkedTo: ":previous", 
     data: [ 
      [1352959200000, 1.44], 
      [1355551200000, 1.48], 
      [1358229600000, 1.5], 
      [1360908000000, 1.52], 
      [1363323600000, 1.5], 
      [1366002000000, 1.47], 
      [1368594000000, 1.46], 
      [1371272400000, 1.26], 
      [1373864400000, 1.28], 
      [1376542800000, 1.33], 
      [1379221200000, 1.33], 
      [1381813200000, 1.41] 
     ] 
    }, { 
     name: "2nd Series", 
     data: [ 
      [1352999200000, 1.21, 1.21, 1.36, 1.45, 1.45], 
      [1355591200000, 1.17, 1.17, 1.27, 1.46, 1.46], 
      [1358269600000, 1.18, 1.18, 1.28, 1.55, 1.55], 
      [1360948000000, 1.22, 1.22, 1.39, 1.61, 1.61], 
      [1363363600000, 1.28, 1.28, 1.4, 1.61, 1.61], 
      [1366042000000, 1.27, 1.27, 1.37, 1.61, 1.61], 
      [1368634000000, 1, 1, 1.11, 1.28, 1.28], 
      [1371312400000, 1, 1, 1.22, 1.33, 1.33], 
      [1373904400000, 1.09, 1.09, 1.33, 1.39, 1.39], 
      [1376582800000, 1.26, 1.26, 1.36, 1.43, 1.43], 
      [1379261200000, 1.25, 1.25, 1.36, 1.49, 1.49], 
      [1381853200000, 1.26, 1.26, 1.48, 1.59, 1.59] 
     ] 
    }, { 
     name: "2nd Series Median Trend", 
     type: "spline", 
     linkedTo: ":previous", 
     data: [ 
      [1352999200000, 1.36], 
      [1355591200000, 1.27], 
      [1358269600000, 1.28], 
      [1360948000000, 1.39], 
      [1363363600000, 1.4], 
      [1366042000000, 1.37], 
      [1368634000000, 1.11], 
      [1371312400000, 1.22], 
      [1373904400000, 1.33], 
      [1376582800000, 1.36], 
      [1379261200000, 1.36], 
      [1381853200000, 1.48] 
     ] 
    }] 
+0

只有boxPlots /列具有該功能用於分組。您可以按某個時間間隔爲線條轉換x值。像這樣:http://jsfiddle.net/6vpxJ/2/但是!當按照圖例隱藏序列時,它不會調整值,並且值是固定的,而圖表的寬度可能會有所不同。 –

回答

0

我看中了該解決方案採用抵消日期值的帕維爾的建議,也非對箱形圖進行分組並且偏移與箱形圖對應的趨勢線數據點。這樣,箱形圖和趨勢線將被隱藏,無論對準,調整大小,等等

jsfiddle

$(function() { 
var interval = 3 * 24 * 3600 * 1000; 
$('#container').highcharts({ 
    chart: { 
     type: 'boxplot' 
    }, 

    title: { 
     text: 'Highcharts Box Plot Example' 
    }, 

    plotOptions: { 
     boxplot: { 
      grouping: false, 
      shadow: false, 
      pointWidth: 10 
     }, 
     spline:{ 
      marker: { 
       enabled: false 
      } 
     } 
    }, 

    xAxis: { 
     type: "datetime", 
     title: { 
      text: "Test Date" 
     }, 
    }, 
    yAxis: { 
     title: { 
      text: 'Observations' 
     }, 
    }, 

    series: [{ 
     name: "1st Series", 
     data: [ 
      [1352959200000 - interval, 1.38, 1.38, 1.44, 1.59, 1.59], 
      [1355551200000 - interval, 1.39, 1.39, 1.48, 1.63, 1.63], 
      [1358229600000 - interval, 1.41, 1.41, 1.5, 1.6, 1.6], 
      [1360908000000 - interval, 1.37, 1.37, 1.52, 1.61, 1.61], 
      [1363323600000 - interval, 1.47, 1.47, 1.5, 1.66, 1.66], 
      [1366002000000 - interval, 1.33, 1.33, 1.47, 1.62, 1.62], 
      [1368594000000 - interval, 1.26, 1.26, 1.46, 1.54, 1.54], 
      [1371272400000 - interval, 1.14, 1.14, 1.26, 1.43, 1.43], 
      [1373864400000 - interval, 1.21, 1.21, 1.28, 1.35, 1.35], 
      [1376542800000 - interval, 1.31, 1.31, 1.33, 1.46, 1.46], 
      [1379221200000 - interval, 1.31, 1.31, 1.33, 1.46, 1.46], 
      [1381813200000 - interval, 1.33, 1.33, 1.41, 1.67, 1.67] 
     ] 
    }, { 
     name: "1st Series Median", 
     type: "spline", 
     linkedTo: ":previous", 
     data: [ 
      [1352959200000 - interval, 1.44], 
      [1355551200000 - interval, 1.48], 
      [1358229600000 - interval, 1.5], 
      [1360908000000 - interval, 1.52], 
      [1363323600000 - interval, 1.5], 
      [1366002000000 - interval, 1.47], 
      [1368594000000 - interval, 1.46], 
      [1371272400000 - interval, 1.26], 
      [1373864400000 - interval, 1.28], 
      [1376542800000 - interval, 1.33], 
      [1379221200000 - interval, 1.33], 
      [1381813200000 - interval, 1.41] 
     ] 
    }, { 
     name: "2nd Series", 
     data: [ 
      [1352999200000 + interval, 1.21, 1.21, 1.36, 1.45, 1.45], 
      [1355591200000 + interval, 1.17, 1.17, 1.27, 1.46, 1.46], 
      [1358269600000 + interval, 1.18, 1.18, 1.28, 1.55, 1.55], 
      [1360948000000 + interval, 1.22, 1.22, 1.39, 1.61, 1.61], 
      [1363363600000 + interval, 1.28, 1.28, 1.4, 1.61, 1.61], 
      [1366042000000 + interval, 1.27, 1.27, 1.37, 1.61, 1.61], 
      [1368634000000 + interval, 1, 1, 1.11, 1.28, 1.28], 
      [1371312400000 + interval, 1, 1, 1.22, 1.33, 1.33], 
      [1373904400000 + interval, 1.09, 1.09, 1.33, 1.39, 1.39], 
      [1376582800000 + interval, 1.26, 1.26, 1.36, 1.43, 1.43], 
      [1379261200000 + interval, 1.25, 1.25, 1.36, 1.49, 1.49], 
      [1381853200000 + interval, 1.26, 1.26, 1.48, 1.59, 1.59] 
     ] 
    }, { 
     name: "2nd Series Median", 
     type: "spline", 
     linkedTo: ":previous", 
     data: [ 
      [1352999200000 + interval, 1.36], 
      [1355591200000 + interval, 1.27], 
      [1358269600000 + interval, 1.28], 
      [1360948000000 + interval, 1.39], 
      [1363363600000 + interval, 1.4], 
      [1366042000000 + interval, 1.37], 
      [1368634000000 + interval, 1.11], 
      [1371312400000 + interval, 1.22], 
      [1373904400000 + interval, 1.33], 
      [1376582800000 + interval, 1.36], 
      [1379261200000 + interval, 1.36], 
      [1381853200000 + interval, 1.48] 
     ] 
    }] 

}); 

});