jqChart烛台图:奇怪的显示

时间:2012-07-17 14:10:35

标签: javascript jquery jquery-plugins jqchart

我正在为jQuery使用jqChart插件 使用以下代码,烛台图表将正确呈现。

<script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'CNDL CHRT' },
                series: [
                            {
                                type: 'candlestick',
                                data : [ ['Mon', 5375, 5325, 5340, 5330], ['Tue', 5322, 5250, 5290, 5270], ['Wed', 5375, 5325, 5340, 5330], ['Fri', 5322, 5250, 5290, 5270]] 
                                                            }
                        ]
            });
        });
    </script>

jqChart OK

除了JSON数据之外,所有其他事情都没有变化,图表未正确呈现 仅显示某些条形图的工具提示 所有的条都没有填充颜色。

data : [["2012/07/02:0920", 5308.2, 5308.2, 5288.0, 5292.4], ["2012/07/02:0930", 5292.0, 5296.7, 5283.35, 5295.05], ["2012/07/02:0940", 5295.95, 5297.3, 5286.6, 5288.55], ["2012/07/02:0950", 5289.4, 5292.0, 5284.0, 5285.0]]

jqChart Not OK

第二个“数据”json对象可能出错?
谢谢,

维尼特

1 个答案:

答案 0 :(得分:1)

jqChart烛台图表接受的数据格式为HLOC。我相信你的第二个数据是OHLC格式。

您可以使用以下内容进行转换:

    var data = [["2012/07/02:0920", 5308.2, 5308.2, 5288.0, 5292.4], ["2012/07/02:0930", 5292.0, 5296.7, 5283.35, 5295.05], ["2012/07/02:0940", 5295.95, 5297.3, 5286.6, 5288.55], ["2012/07/02:0950", 5289.4, 5292.0, 5284.0, 5285.0]];

    for (var i = 0; i < data.length; i++) {

        var item = data[i];

        data[i] = [item[0], item[2], item[3], item[1], item[4]];
    }

    $('#jqChart').jqChart({
        title: { text: 'CNDL CHRT' },
        series: [
                    {
                        type: 'candlestick',
                        data: data
                    }
                ]
    });