yui图表 - 使用connectPoints

时间:2013-06-15 04:09:38

标签: javascript yui

我是yui的新手,并试图创建一个只显示点数的图表(点之间没有连接)。我正在使用类型行图表并通过将“connectPoints”属性设置为false来删除点之间的连接(如API中所述)。但这些观点仍然存在联系。我的代码如下:

var data = '[{"lowRange":1.1 "dateTime":1329264000000},
                {"lowRange":1.1, "dateTime":1331769600000}]';

    var myAxes = {
        resultsData:{
            keys:["lowRange"],
            position:"left",
            type:"numeric",
            styles:{
                majorTicks:{
                    display: "none"
                }
            }
        },
        dateRange:{
            keys:["dateTime"],
            position:"bottom",
            type:"time",
            styles:{
                majorTicks:{
                    display: "none"
                },
                label: {
                    rotation:-45,
                    margin:{top:5}
                }
            }
        }
    };

   var seriesCollection = [{
        type:"line",
        xAxis:"dateRange",
        yAxis:"resultsData",
        xKey:"dateTime",            
        yKey:"lowRange",
        xDisplayName:"Date",
        yDisplayName:"Low Range",
        style: {                
            connectPoints:false             
        }
    }]  

var myChart = new Y.Chart({   
                    dataProvider:data, 
                    axes:myAxes, 
                    seriesCollection:seriesCollection,             
                    render:"#container"                       
                });

任何人都可以提供创建这样的图表或解释如何使用connectPoints属性的示例吗?

1 个答案:

答案 0 :(得分:0)

将线的权重设置为0

 styles: {
            line: {
                weight: 0
            }
        }

工作示例:     http://jsfiddle.net/ffPG7/