我有Blazor服务器端应用程序,我想在其中添加Blazorise实时图表组件。https://blazorise.com/docs/extensions/chart-live
我已经添加了所有必要的包到我的项目,也像下面的示例代码。我得到没有错误的建设和发布过程中。
但是当我在浏览器中打开页面时,我得到了相关脚本文件的错误。由于我的服务器没有互联网接入,我已经下载了我的项目的wwroot目录下的必要文件。但是我得到了所有这些文件的错误,它们没有被识别。可能是什么问题?唯一奇怪的是,对我来说,脚本文件没有扩展名???
这里是host_cshtml文件中的相关部分
<script src="files/luxon"></script>
<script src="files/chartjs-adapter-luxon"></script>
<script src="files/chartjs-plugin-streaming"></script>
下面是我从浏览器中得到的三个脚本文件的错误。
Uncaught SyntaxError: expected expression, got '<'luxon:2
Uncaught SyntaxError: expected expression, got '<'chartjs-adapter-luxon:2
Uncaught SyntaxError: expected expression, got '<'chartjs-plugin-streaming:2
这是我的剃刀文件
<LineChart @ref="horizontalLineChart" TItem="LiveDataPoint" OptionsObject="@horizontalLineChartOptions">
<ChartStreaming TItem="LiveDataPoint"
Options="new ChartStreamingOptions { Delay = 2000 }"
Refreshed="@OnHorizontalLineRefreshed" />
</LineChart>
@code{
LineChart<LiveDataPoint> horizontalLineChart;
Random random = new Random( DateTime.Now.Millisecond );
string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };
public struct LiveDataPoint
{
public object X { get; set; }
public object Y { get; set; }
}
object horizontalLineChartOptions = new
{
Scales = new
{
Y = new
{
Title = new
{
Display = true,
Text = "Value"
}
}
},
Interaction = new
{
intersect = false
}
};
protected override async Task OnAfterRenderAsync( bool firstRender )
{
if ( firstRender )
{
await Task.WhenAll(
HandleRedraw( horizontalLineChart, GetLineChartDataset1 ) );
}
}
async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( BaseChart<TDataSet, TItem, TOptions, TModel> chart, params Func<TDataSet>[] getDataSets )
where TDataSet : ChartDataset<TItem>
where TOptions : ChartOptions
where TModel : ChartModel
{
await chart.Clear();
await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSets.Select( x => x.Invoke() ).ToArray() );
}
LineChartDataset<LiveDataPoint> GetLineChartDataset1()
{
return new LineChartDataset<LiveDataPoint>
{
Data = new List<LiveDataPoint>(),
Label = "Dataset 1 (linear interpolation)",
BackgroundColor = backgroundColors[0],
BorderColor = borderColors[0],
Fill = false,
Tension = 0,
BorderDash = new List<int> { 8, 4 },
};
}
Task OnHorizontalLineRefreshed( ChartStreamingData<LiveDataPoint> data )
{
data.Value = new LiveDataPoint
{
X = DateTime.Now,
Y = RandomScalingFactor(),
};
return Task.CompletedTask;
}
double RandomScalingFactor()
{
return ( random.NextDouble() > 0.5 ? 1.0 : -1.0 ) * Math.Round( random.NextDouble() * 100 );
}
}
1条答案
按热度按时间bxfogqkk1#
我已经添加了.js扩展名的文件和它的工作