条形图样式:隐藏项目

时间:2016-07-26 13:44:10

标签: highcharts styles bar-chart

我想最终确定一个条形图表类型。这是通过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/

上看到结果

你能帮我吗?

1 个答案:

答案 0 :(得分:0)

credits: { enabled: false }

删除highcharts链接(API) 和

exporting: { enabled: false }

删除菜单 (API

或使用     exporting.buttons.contextButton.menuItems 自定义按钮 (APIExample