带有间隙的jqPlot折线图

Question

我已经能够通过为我的数据集中的每个时间跨度创建一个新系列来创建带帽的水平线图。

虽然这反映了我的目的，但我想知道这是否是实现目标的最有效方式。

public class PlayerSession 
{
    public string PlayerSessionId { get; set; }
    public string PlayerName { get; set; }
    public DateTime LoginDateTime { get; set; }
    public DateTime LogoutDateTime { get; set; }
}

@model List<PlayerSession>
@{  
    List<List<List<string>>> series = new List<List<List<string>>>();
    foreach(PlayerSession playerSession in this.Model)
    {
        series.Add(new List<List<string>> { 
            new List<string> {
                playerSession.LoginDateTime.ToString(),
                playerSession.PlayerName                
            },
            new List<string> {
                playerSession.LogoutDateTime.ToString(),
                playerSession.PlayerName                
            }
        });     
    }   
}
<div id="player-session-graph"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $.jqplot('player-session-graph', @Html.Raw(Json.Encode(series)),{
            seriesDefaults: {
                showMarker: false,
                color: '#446C32',
                lineWidth: 10,
                lineCap: 'butt'
            },
            axes: {
                yaxis: { renderer: $.jqplot.CategoryAxisRenderer },
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: "%a, %b %e, %Y", angle: -30
                    },
                    min: '2013-05-19',
                    max: '2013-05-25',
                    tickInterval: '1 day'
                }
            }
        });
    });
</script>

结果如下：

任何有关绘制这些线的更有效方法的见解都会受到欢迎。谢谢！

Answer 1

根据jqPlot documentation about bar charts，您可以指定：

barWidth  : z

在rendererOptions {}部分。其中z表示条形图的宽度。如果在同一轴值上有多个条形，也可以指定barPadding和barMargin。