ChartJS 我无法使Blazorise Live-Chart组件正常工作,在浏览器中打开页面时,相关脚本文件出错

ygya80vv  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(183)

我有Blazor服务器端应用程序,我想在其中添加Blazorise实时图表组件。https://blazorise.com/docs/extensions/chart-live
我已经添加了所有必要的包到我的项目,也像下面的示例代码。我得到没有错误的建设和发布过程中。
但是当我在浏览器中打开页面时,我得到了相关脚本文件的错误。由于我的服务器没有互联网接入,我已经下载了我的项目的wwroot目录下的必要文件。但是我得到了所有这些文件的错误,它们没有被识别。可能是什么问题?唯一奇怪的是,对我来说,脚本文件没有扩展名???
这里是host_cshtml文件中的相关部分

  1. <script src="files/luxon"></script>
  2. <script src="files/chartjs-adapter-luxon"></script>
  3. <script src="files/chartjs-plugin-streaming"></script>

下面是我从浏览器中得到的三个脚本文件的错误。

  1. Uncaught SyntaxError: expected expression, got '<'luxon:2
  2. Uncaught SyntaxError: expected expression, got '<'chartjs-adapter-luxon:2
  3. Uncaught SyntaxError: expected expression, got '<'chartjs-plugin-streaming:2

这是我的剃刀文件

  1. <LineChart @ref="horizontalLineChart" TItem="LiveDataPoint" OptionsObject="@horizontalLineChartOptions">
  2. <ChartStreaming TItem="LiveDataPoint"
  3. Options="new ChartStreamingOptions { Delay = 2000 }"
  4. Refreshed="@OnHorizontalLineRefreshed" />
  5. </LineChart>
  6. @code{
  7. LineChart<LiveDataPoint> horizontalLineChart;
  8. Random random = new Random( DateTime.Now.Millisecond );
  9. string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
  10. 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 ) };
  11. 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 ) };
  12. public struct LiveDataPoint
  13. {
  14. public object X { get; set; }
  15. public object Y { get; set; }
  16. }
  17. object horizontalLineChartOptions = new
  18. {
  19. Scales = new
  20. {
  21. Y = new
  22. {
  23. Title = new
  24. {
  25. Display = true,
  26. Text = "Value"
  27. }
  28. }
  29. },
  30. Interaction = new
  31. {
  32. intersect = false
  33. }
  34. };
  35. protected override async Task OnAfterRenderAsync( bool firstRender )
  36. {
  37. if ( firstRender )
  38. {
  39. await Task.WhenAll(
  40. HandleRedraw( horizontalLineChart, GetLineChartDataset1 ) );
  41. }
  42. }
  43. async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( BaseChart<TDataSet, TItem, TOptions, TModel> chart, params Func<TDataSet>[] getDataSets )
  44. where TDataSet : ChartDataset<TItem>
  45. where TOptions : ChartOptions
  46. where TModel : ChartModel
  47. {
  48. await chart.Clear();
  49. await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSets.Select( x => x.Invoke() ).ToArray() );
  50. }
  51. LineChartDataset<LiveDataPoint> GetLineChartDataset1()
  52. {
  53. return new LineChartDataset<LiveDataPoint>
  54. {
  55. Data = new List<LiveDataPoint>(),
  56. Label = "Dataset 1 (linear interpolation)",
  57. BackgroundColor = backgroundColors[0],
  58. BorderColor = borderColors[0],
  59. Fill = false,
  60. Tension = 0,
  61. BorderDash = new List<int> { 8, 4 },
  62. };
  63. }
  64. Task OnHorizontalLineRefreshed( ChartStreamingData<LiveDataPoint> data )
  65. {
  66. data.Value = new LiveDataPoint
  67. {
  68. X = DateTime.Now,
  69. Y = RandomScalingFactor(),
  70. };
  71. return Task.CompletedTask;
  72. }
  73. double RandomScalingFactor()
  74. {
  75. return ( random.NextDouble() > 0.5 ? 1.0 : -1.0 ) * Math.Round( random.NextDouble() * 100 );
  76. }
  77. }
bxfogqkk

bxfogqkk1#

我已经添加了.js扩展名的文件和它的工作

相关问题