C＃HighCharts X轴

Question

我正在使用Highcharts将信息显示为折线图。

我有两行。 一个代表每半小时，另一个代表每小时。

现在，x轴是基于半小时线的。.但是我担心的是蓝色小时线。.有24个点，但是例如，当鼠标悬停在第二点时，它表示为0.5点，应该是1 ..因为小时线上没有半小时的时间。.实际上，我希望蓝色小时线一直延伸到整个图表，并且只在小时刻度上有点..而不是半小时刻度。 。

这是我的实现：

var lstXAxis = db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
    .GroupBy(x => x.RecordDateTime.Hour + (x.RecordDateTime.Minute >= 30 ? 0.5 : 0))
    .Select(x => x.Key).OrderBy(x => x).ToList();

var lstHalfHoursAsString = lstXAxis.Select(x => x.ToString()).ToArray(); // results in 48 objects which is correct

var lstGroupRecordsByHour =
    db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
        .GroupBy(x => x.RecordDateTime.Hour).ToList(); // results in 24 which is correct

var arrySummariesByHour = lstGroupSummariesByHour.Select(x => new object[] { x.Count() }).ToArray();

var lstSummariesByHalfHour = db.DailyRecords.Where(x => x.RecordDateTime.Year == year && !x.deleted)
    .GroupBy(x => x.RecordDateTime.Hour + (x.RecordDateTime.Minute >= 30 ? 0.5 : 0)).ToList();

var arrySummariesByHalfHour = lstSummariesByHalfHour.Select(x => new object[] { x.Count() }).ToArray();

Highcharts countHourChart =
    new Highcharts("ChartTwo").InitChart(new DotNet.Highcharts.Options.Chart()
    {
        DefaultSeriesType = DotNet.Highcharts.Enums.ChartTypes.Line,
        Width = 1180
    })
        .SetCredits(new Credits { Enabled = false })
        .SetTitle(new Title
        {
            Text = year.ToString() + " Count Graph By Hour",
            Style = "font: 'normal 20px Impact', color: 'black'"
        })
        .SetXAxis(new XAxis
        {
            Categories = lstHalfHoursAsString,
            Title = new XAxisTitle { Text = "Hour", Style = "font: 'normal 14px Arial', color: 'black'" }
        })
        .SetYAxis(new YAxis
        {
            Title =
                new YAxisTitle
                {
                    Text = "Mission Count",
                    Style = "font: 'normal 14px Arial', color: 'black'"
                }
        })
        .SetPlotOptions(new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                DataLabels = new PlotOptionsColumnDataLabels
                {
                    Enabled = true
                },
                EnableMouseTracking = false
            }
        })
        .SetSeries(new[]
        {
            new Series {Data = new Data(arrySummariesByHour), Name = "Missions Per Hour"},
            new Series {Data = new Data(arrySummariesByHalfHour), Name = "Mission per Half Hour"}
        });

所以我的问题..是如何使蓝线延伸到整个图表上，并且将点与0、1、2、3等对齐，而不是与0、0.5、1、1.5 ..等对齐。

Answer 1

您试图绘制两个带有包含类别的x轴的系列，但是其中一个系列的点数不及类别（所需点数的一半）。

要解决您的问题，您应该在与半小时类别相对应的每个位置的小时序列中添加null值，以使两个序列的分数相同。 然后，您选择连接null值，以使线是实线。

这是一个示例，以了解我的意思（它使用的是纯JavaScript，但概念相同）：

 Highcharts.chart('container', { xAxis: { categories: ['0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6'] }, plotOptions: { series: { connectNulls: true } }, series: [{ data: [2, 7, 10, 12, 14, 17, 13, 14, 21, 19, 9, 5], }, { data: [1, 5, 9, 2, 4, 7], }, { data: [1, null, 5, null, 9, null, 2, null, 4, null, 7], }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div> 

第一个系列是您的半小时系列，第二个是您的当前小时系列，第三个是您的新系列。

现在，在C＃中，您将拥有：

var arrySummariesByHour = lstGroupSummariesByHour
    .SelectMany(x => new object[] {
        x.Count(), // hour tick
        null       // half hour tick
    }).ToArray();

以及连接空值的选项：

.SetPlotOptions(new PlotOptions
{
     Series = new PlotOptionsSeries 
     {
         ConnectNulls = true
     }
}