2016-07-26 72 views
-1

我想敲定條形圖圖表類型。這是用Highcharts完成的。 我想知道如何刪除右上角的小按鈕允許打印圖形。 此外,如何刪除圖表下方的「Highcharts.com」鏈接?條形圖風格:隱藏項目

這是我的PHP/HTML代碼:

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 

<div id="container"></div> 

<div style="margin: 20px 0px 0px 60px"> 
    <!-- 
    The "oninput" attribute is automatically showing the value of the slider on load and whenever the user changes the value. 
    Since we are using a category x-axis, the values are between 0 and 12. For this example, I'm adding your base year (2004) 
    to the output value so it shows a label that's meaningful to the user. To expand this example to more years, set your max value 
    to the appropriate value and the base year to wherever you plan to start your chart's data. 
    --> 
    <script> 
    $(function() { 

    }); 

    </script> 


    <div id="slider-range"></div> 

    <p> 
    <label for="amount">Year(s):</label> 
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
    </p> 

</div> 

在這裏,我的JS代碼:

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'column', 
     zoomType: 'x' 
    }, 
    colors: [ 
     '#d8d826' 
    ], 
    legend: { 
     enabled: false 
    }, 
    title: { 
     style: { 
     fontSize: '0px' 
     } 
    }, 
    subtitle: { 
     style: { 
     fontSize: '0px' 
     } 
    }, 
    xAxis: { 
     // NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn. 
     // I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts. 
     categories: ['1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'], 
     tickmarkPlacement: 'on', 
     tickInterval: 1, 
     minRange: 1 // set this to allow up to one year to be viewed 
    }, 
    yAxis: { 
     min: 15, 
     title: { 
     text: 'Number', 
     style: { 
      fontSize: '0px' 
     } 
     } 
    }, 
    tooltip: { 
     shared: false, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
     pointPadding: 0.2, 
     borderWidth: 0 
     } 
    }, 
    series: [{ 
     name: 'data by year', 
     data: [49.9, 83.6, 48.9, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 83.6, 40.9, 69.9, 83, 28.9, 40.9, 81.6, 24.9, 46.4, 49.9, 83.6, 48.9, 69.1, 50] 
    }] 
    }, function(chart) { 

    $("#slider-range").slider({ 
     range: true, 
     min: 1960, 
     max: 2016, 
     values: [1960, 2016], 
     slide: function(event, ui) { 
     $("#amount").val(ui.values[0] + " - " + ui.values[1]); 
     chart.xAxis[0].setExtremes(ui.values[0] - 1960, ui.values[1] - 1960) 
     } 
    }); 
    $("#amount").val($("#slider-range").slider("values", 0) + 
     " - " + $("#slider-range").slider("values", 1)); 

    }); 

}); 

你可以看到結果:https://jsfiddle.net/uvat8u05/26/

你能幫助我嗎?

回答

0
credits: { enabled: false } 

刪除highcharts鏈接(API) 和

exporting: { enabled: false } 

刪除菜單 (API

或使用 exporting.buttons.contextButton.menuItems 來定製你的按鈕 ( APIExample

+1

請注意,您必須擁有許可證才能刪除信用點鏈接。 – wergeld

+0

如果不包含導出模塊 –

+0

將不會出現導出菜單完美!謝謝。 – Lucile