【问题标题】:Customizing the Stockchart range selector buttons from HighCharts library in GWT (and Javascript in general)从 GWT 中的 HighCharts 库中自定义 Stockchart 范围选择器按钮(以及一般的 Javascript)
【发布时间】:2012-08-29 13:05:01
【问题描述】:

我正在为 GWT 使用 HighCharts 库,但遇到了问题。

我正在尝试这样的事情:stock chart example。我对这个问题唯一感兴趣的是rangeSelector 中的buttons 属性,我想在其中自定义按钮文本)。在javascript上代码是这样的:

rangeSelector: {
            buttons: [{
                type: 'day',
                count: 3,
                text: '3dias'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6MS'
            }, {
                type: 'year',
                count: 1,
                text: '1ano'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 3
        }

现在我尝试在 GWT 中做同样的事情,使用图表上的 setOption() 方法。但似乎没有任何效果。

我认为我遇到了麻烦,因为 buttons 属性需要一组属性,而这就是我不知道如何解决的问题。

我尝试过的东西:

chart.setOption("/rangeSelector/buttons", 
      new String[]{"{type: 'day', count: 1, text: '1dia'}", "{type: 'day', count: 1, text: '1dia'}"});`

这是我能想到的最好的方法,它创建了两个空按钮并且没有任何操作。

任何帮助将不胜感激。非常感谢。

更新:(2012 年 12 月 13 日)
给出接受的答案后,我需要设置按钮witdh。 为此,只需使用:

buttonTheme: {
    width: 80
}

类似:

rangeSelector: {
                selected: 2,
                inputBoxStyle: {
                    top: '40px',
                    right: '10px'},
                buttons: [{
                    type: 'week',
                    count: 1,
                    text: '1 semana'
                }],
                buttonTheme: {
                    width: 80
                }
            }

【问题讨论】:

    标签: javascript gwt highcharts highstock


    【解决方案1】:

    请您尝试以下操作:

     String rangeSelectorConfig =  " {\n" +
                "                buttons: [{\n" +
                "                    type: 'day',\n" +
                "                    count: 3,\n" +
                "                    text: '3dias'\n" +
                "                }, {\n" +
                "                    type: 'week',\n" +
                "                    count: 1,\n" +
                "                    text: '1w'\n" +
                "                }]" +
                "            }" ;
     JSONValue config = JSONParser.parseLenient(rangeSelectorConfig);
     chart.setOption("/rangeSelector", config);
    

    Chart 类(在 Configurable 的帮助下)不会为您解析 JSON 对象,因此代码中的按钮作为字符串文字传递给本机 HightCharts JS。

    【讨论】:

    • 成功了!非常感谢。不过只有一个问题,你为什么把“\n”放在那里?有什么特别的原因吗?我问是因为它没有它们也能工作。
    • 这只是我的 IDEA 的格式化提示 :),将字符串文字复制/粘贴到 Java 代码。没有理由添加它们。
    • 啊,好吧,我认为它可以是任何一种模式,或良好的做法或其他东西。再问一个问题,如果你知道的话。是否可以更改按钮的长度?因为现在如果我添加更长的文本,会很乱。
    • 我不确定,实际上。但是您是否尝试过简单地为“按钮”传递“宽度”属性?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-13
    • 2020-09-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多