Question

我已经用最新的HighStock库（Highstock JS v6.1.1）实现了xRange图表，它的工作原理绝对不错，但是在我的项目中，我们使用库的 旧版本 作为（“ https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highstock-all.js”），这无效。

注意：我不想升级该库，因为它将对其他现有图表产生重大影响。

我的xRange图表有效在这里摆弄：please refer

带有较旧版本的库无法正常工作的xRange图表在这里摆弄：please refer

任何人都可以帮忙。谢谢

<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的支持时。您可以在changelog（低于6.0.0版本）和plotOptions中看到它，它表示已添加了某些内容的版本，位于该元素的右上角（如果您向下滚动到底部，您会看到它在xRange上显示自6.0.0起。

HighStock的“ xRange”图表不适用于旧版本的库（HighStock）

1 个答案: