Question

我正在尝试使用图片中的样本数据来获取高价样本图表。我用highstock库下载它，它在示例下的基本行文件夹中。我想为它的按钮等设置样式。按钮部分显示在彼此上。

enter image description here

我想通过我在这里找到的inputBoxWidth修复它：link

它只是通过破坏右上角的输入框而造成的。我希望按钮能够像我想要的那样宽，而且没有任何问题。我怎样才能做到这一点？

* ps：我也想知道如何删除/编辑我用红色圈出的元素。图表右下方的链接和按钮位于＆＃34; To：＆＃34;输入框。因为我在我的html文件中找不到它们。

修改：我删除了右下角的链接 edit2 ：我还删除了导出按钮

这是我的档案：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highstock Example</title>

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {

                  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
                            // Create the chart
                            $('#container').highcharts('StockChart', {


                                                       rangeSelector : {

                                                       buttonTheme: { // styles for the buttons
                                                            fill: 'none',
                                                            stroke: 'none',
                                                            'stroke-width': 15,
                                                            style: {
                                                                color: '#039',
                                                                fontWeight: 'bold'
                                                            },
                                                            states: {
                                                                hover: {
                                                                },
                                                                select: {
                                                                    fill: '#039',
                                                                    style: {
                                                                        color: 'white'
                                                                    }
                                                                }
                                                            }
                                                        },
                                                       selected : 1,
                                                       buttons: [
                                                                 {
                                                                 // quarter button
                                                                 type: 'month',
                                                                 count: 3,
                                                                 text: 'Q'},
                                                                 // year button
                                                                 {
                                                                 type: 'year',
                                                                 count: 1,
                                                                 text: 'Y'},
                                                                 // ytd button
                                                                 {
                                                                 type: 'ytd',
                                                                 text: 'YTD'},
                                                                 // all button
                                                                 {
                                                                 type: 'all',
                                                                 text: 'ALL'}]
                                                       },

                                                       title : {
                                                       text : 'AAPL Stock Price'
                                                       },

                                                       series : [{
                                                                 name : 'AAPL',
                                                                 data : data,
                                                                 tooltip: {
                                                                 valueDecimals: 2
                                                                 }
                                                                 }]
                                                       });
                            });

                  });

                </script>
            </head>
    <body>
        <script src="/Users/ihtechnology/Desktop/IH57/highstock.js"></script>
        <script src="/Users/ihtechnology/Desktop/IH57/modules/exporting.js"></script>

        <div id="container" style="height: 500px; min-width: 500px"></div>
    </body>
</html>

Answer 1

您可以使用buttons theme并以这种方式设置宽度：

buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                width:40,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },

http://jsfiddle.net/dLGH9/

如何正确定位highcharts - highstock按钮？

1 个答案: