mariusmuntean / ChartJs.Blazor

Brings Chart.js charts to Blazor
https://www.iheartblazor.com/
MIT License
691 stars 152 forks source link

PieOptions does not contain a definition for 'Scale' and ChartJsBlazorInterop.js not found. #184

Open krispenner opened 3 years ago

krispenner commented 3 years ago

Describe the bug

I am just starting with this, I setup my _Host file as you described in the readme and trying to make it as simple as possible based on your sample but I get two errors. First the server code executing throws RuntimeBinderException: ''ChartJs.Blazor.PieChart.PieOptions' does not contain a definition for 'Scale'' and secondly my browser tools show _content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js not found (404).

Any help would be much appreciated - thank you!

_Hosts

    <script src="_framework/blazor.server.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>

Which Blazor project type is your bug related to?

Which charts does this bug apply to?

PieChart

To Reproduce

Steps to reproduce the behavior:

  1. Using this version of ChartJSBlazor '2.0.2'.
  2. Run this code
    
    <Chart Config="chartConfig"></Chart>

@code { private PieConfig chartConfig;

protected override async Task OnInitializedAsync()
{
    chartConfig = new PieConfig
    {
        Options = new PieOptions
        {
            Responsive = true,
            Title = new OptionsTitle
            {
                Display = true,
                Text = "Requests per Service"
            }
        }
    };

    foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" })
    {
        chartConfig.Data.Labels.Add(color);
    }

    PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
    {
        BackgroundColor = new[]
        {
        ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red"
        ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow"
        ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green"
        ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue"
    }
    };

    chartConfig.Data.Datasets.Add(dataset);

}



3. See these errors:
Code execution: Microsoft.CSharp.RuntimeBinder.RuntimeBinderException: ''ChartJs.Blazor.PieChart.PieOptions' does not contain a definition for 'Scale''
Chrome browser development tools: 404 _content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js not found.
pgrimstrup commented 3 years ago

Code execution errors: Are these being thrown as exceptions that you need to handle? There are a couple of places in the code where dynamic is being used and trying to access the Scale property, which is available on some of the Options classes, but these exceptions are caught and released. They should not be bubbling up. In other words, if you see them in the output window you can safely ignore them. There is a bit of technical debt there (a quick and dirty approach was taken) so I will see if there is a more elegant method of handling this (probably implement an internal interface or something).

404 error: Make sure the Package ID on the project is the same as the Project Name (or output file name, I can't remember which). I know from experience that changing the Package ID does cause this behavior. Revert to the Package ID to the default value. Also try setting a <base href='/'/> tag in the _Hosts page header.