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

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

我有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 );
}
}
bxfogqkk

bxfogqkk1#

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

相关问题