2016-07-26 6 views
-1

barchartグラフタイプを完成させたいと思います。これはHighchartsで行われました。 右上の小さなボタンを削除する方法を知りたいので、グラフを印刷することができます。 また、グラフの下にある "Highcharts.com"リンクを削除するにはどうすればよいですか?ここでBarchartスタイル:アイテムを非表示

は私の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コード:あなたは私を助けてくださいでしhttps://jsfiddle.net/uvat8u05/26/

$(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)); 

    }); 

}); 

あなたは上の結果を見ることができますか?

答えて

0
credits: { enabled: false } 

は( と

exporting: { enabled: false } 

メニュー (API

を削除したり、ボタンをカスタマイズする exporting.buttons.contextButton.menuItems を使用highchartsリンク(API)を削除しますAPI, Example

+1

クレジットリンクを削除するには、ライセンスが必要です。 – wergeld

+0

エクスポートモジュールが含まれていないと、エクスポートメニューは表示されません –

+0

パーフェクト!ありがとうございました。 – Lucile

関連する問題