2017-05-30 138 views
-1

这是我取得了迄今为止如何将图表直接放置在图例上方? (highcharts)

http://jsfiddle.net/9r6Lr5gr/3/

Highcharts.chart('container', { 
chart: { 
    type: 'bar' 
}, 
title: { 
    text: '' 
}, 
exporting: { 
     enabled: false 
}, 
credits: { 
     enabled: false 
}, 
tooltip: { 
     enabled: false 
}, 
xAxis: { 
     lineWidth: 0, 
    title: { 
      text: '' 
    }, 
    labels: { 
      enabled: false 
    } 
}, 
yAxis: { 
     gridLineWidth: 0, 
    title: { 
      text: '' 
    }, 
    stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: 'gray' 
     }, 
     formatter: function(){ 
       return 'Total: ' + this.total; 
     } 
    }, 
    labels: { 
      enabled: false 
    } 
}, 
legend: { 
    reversed: true, 
    align: 'left' 
}, 
plotOptions: { 
    series: { 
     stacking: 'normal', 
     pointWidth: 30, 
     dataLabels: { 
      enabled: true, 
      color: 'white', 
      style: { 
        fontWeight: 'none', 
        fontSize: 15 
      } 
     } 
    } 
}, 
series: [{ 
    name: 'Outstanding (due > 7 days)', 
    data: [41] 
}, { 
    name: 'Outstanding (due < 7 days)', 
    data: [32] 
}, { 
    name: 'Overdue', 
    data: [15] 
}] 
}); 

我想条形图直接放置在图例上方。另外,是否有可能在条形图之前的小水平线。谢谢。

回答

0

通过评论代码

Fiddle Demo

Highcharts.chart('container', { 
    chart: { 
     type: 'bar', 
     marginBottom: -180, //make charts display at bottom 
     events: { 
      load: function() { 
       // Draw the horizontal line 
       var ren = this.renderer, 
        colors = Highcharts.getOptions().colors, 
        line = ['M', 550, 0, 'L', 0, 0, 'L', 0, 0, 'M', 0, 0, 'L', 5, 0]; 

       ren.path(line) 
        .attr({ 
         'stroke-width': 2, 
         stroke: colors[1] 
        }) 
        .translate(10, 335) 
        .add(); 

      } 
     } 

    }, 
    title: { 
     text: '' 
    }, 
    exporting: { 
      enabled: false 
    }, 
    credits: { 
      enabled: false 
    }, 
    tooltip: { 
      enabled: false 
    }, 
    xAxis: { 
      lineWidth: 0, 
     title: { 
       text: '' 
     }, 
     labels: { 
       enabled: false 
     } 
    }, 
    yAxis: { 
      gridLineWidth: 0, 
     title: { 
       text: '' 
     }, 
     stackLabels: { 
      enabled: true, 
      style: { 
       fontWeight: 'bold', 
       color: 'gray' 
      }, 
      formatter: function(){ 
        return 'Total: ' + this.total; 
      } 
     }, 
     labels: { 
       enabled: false 
     } 
    }, 
    legend: { 
     reversed: true, 
     align: 'left' 
    }, 
    plotOptions: { 
     series: { 
      stacking: 'normal', 
      pointWidth: 30, 
      dataLabels: { 
       enabled: true, 
       color: 'white', 
       style: { 
         fontWeight: 'none', 
         fontSize: 15 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'Outstanding (due > 7 days)', 
     data: [41] 
    }, { 
     name: 'Outstanding (due < 7 days)', 
     data: [32] 
    }, { 
     name: 'Overdue', 
     data: [15] 
    }] 
}); 
相关问题