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
     }
}