HighStock“ xRange”圖表不適用於舊版本庫（HighStock）

Question

我已經用最新的HighStock庫（Highstock JS v6.1.1）實現了xRange圖表，它工作得很好，但是在我的項目中，我們使用的庫版本為（“ https://cdnjs.cloudflare.com/ajax/libs/highstock /2.1.7/highstock-all.js “）無效。

注意：我不想升級該庫，因為它將對其他現有圖表產生重大影響。

我的xRange圖表在這里起作用 ： 請參閱

XRANGE圖與庫不工作撥弄這里的舊版本： 請參考

誰能幫忙。 謝謝

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highstock-all.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

---

Highcharts.stockChart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Admission Timeline'
    },    
    xAxis: {
       type: 'datetime',
       min: Date.UTC(2017, 6, 17, 16, 00), 
       max: new Date().getTime()      
    },
    yAxis: {
        title: {
            text: 'Admission'
        },
        id:'123445567',
        categories: ['Admission'],
        reversed: true,
        opposite: false,
        labels: {
                 x: -3,
                 align: "right", 
                 style: {
                           color: "#595959",
                           font: "13px Calibri, sans-serif"
                      }
         },
         title: {           
                        text: "",
                        textAlign: "right",
                        rotation: 0,
                        margin: 60,
                        style: {
                            color: "rgb(124, 97, 114)",
                            font: "15px Calibri, sans-serif",
                            fontWeight: "bold"
                        }
         },
         offset: 0,
         lineWidth: 0,
         timeline: true
    },
    tooltip: {
            split: false,
        formatter () {
          const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
          const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x2)
          const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`   
          const body = `<tr>
                  <td style="color:${"#FF0000"};padding:0">${this.series.name} </td>
            </tr><tr>
                  <td style="color:${"#808000"};padding:0"><b>Disease: Allergy</b></td>
            </tr>`      
          const footer = '</table>'      
          return header + body + footer
    },
    useHTML: true
    },
    series: [{
        name: 'Name: XYZ',        
        data: [{
            x: 1504310400000,
            x2: 1506124800000,
            y: 0,            
            partialFill: 0.20,
            color: "#00FF00"
        },{
            x: Date.UTC(2017, 09, 04),
            x2: Date.UTC(2017, 09, 30),
            y: 0,           
            partialFill: 0.05
        },{
            x: Date.UTC(2017, 11, 14),
            x2: Date.UTC(2017, 11, 24),
            y: 0,           
            partialFill: 0.05,
            color: "#E77471"
        },{
            x: Date.UTC(2018, 01, 05),
            x2: Date.UTC(2018, 01, 21),
            y: 0,           
            partialFill: 0.02
        }] ,                
        yAxis: 0,       
                title: "series Title", 
        color:'gray',            
        borderColor: 'gray',
        pointWidth: 20,       
        timeline: true,
        type: "xrange",           
        dataLabels: {
            enabled: true,
            x: 1,
            y: 24,
            borderWidth: 2,
            padding: 5,
            shadow: false,
            style: {
                 fontFamily: "Calibri",
                 color: "#FFFFFF",
                 textShadow: "none",
                 fontSize: "11px",
                 fontWeight: "normal",
                 cursor: "default"
            }
        }
    }]
});

Answer 1

如果不對highstock.js進行一些重大修改，則可能無法使xRange與Highstock 6.0.0之前的版本一起使用，因為那是在添加對xRange支持時。 你可以在看到這個更新日志 （6.0.0下），並在plotOptions它表示加入一些版本中，該元素的右上角（如果你向下滾動至底部，您會看到它說由於在xRange 6.0.0 ）。