Xamarin.forms 是否可以在Xamari.Forms中的webview中添加javascript图表_Xamarin.forms_Chart.js

Xamarin.forms 是否可以在Xamari.Forms中的webview中添加javascript图表

xamarin.forms chart.js

Xamarin.forms 是否可以在Xamari.Forms中的webview中添加javascript图表,xamarin.forms,chart.js,Xamarin.forms,Chart.js,嗨，伙计们我想知道，如果可以在Xamarin.Forms页面的WebView中使用javascript创建这样的折线图，则必须在代码中添加这些线的值我遵循本教程，实现了一个该教程或多或少运行良好，但我更改了index.htm文件，并添加了utils.js，使其具有与第一个链接中相同的图表 index和utils.js的内容与F12的第一个链接相同但是我不知道我还需要什么，我的直觉告诉我utils.js文件不能正常工作。这是我运行应用程序时的结果，我希望有人有解决方案：现在我可以在Xa

嗨，伙计们

我想知道，如果可以在Xamarin.Forms页面的WebView中使用javascript创建这样的折线图，则必须在代码中添加这些线的值

我遵循本教程，实现了一个

该教程或多或少运行良好，但我更改了index.htm文件，并添加了utils.js，使其具有与第一个链接中相同的图表

index和utils.js的内容与F12的第一个链接相同

但是我不知道我还需要什么，我的直觉告诉我utils.js文件不能正常工作。这是我运行应用程序时的结果，我希望有人有解决方案：

现在我可以在Xamarin.Forms页面中很好地看到图表，为此，我复制了所有文件并在multi-axi.html中更改了路径

<!doctype html>
<html>

<head>
    <title>Line Chart Multiple Axes</title>
    <script src="../../../../dist/2.8.0/Chart.min.js"></script>
    <script src="../../utils.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
    <script>
        var lineChartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                borderColor: window.chartColors.red,
                backgroundColor: window.chartColors.red,
                fill: false,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                yAxisID: 'y-axis-1',
            }, {
                label: 'My Second dataset',
                borderColor: window.chartColors.blue,
                backgroundColor: window.chartColors.blue,
                fill: false,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                yAxisID: 'y-axis-2'
            }]
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = Chart.Line(ctx, {
                data: lineChartData,
                options: {
                    responsive: true,
                    hoverMode: 'index',
                    stacked: false,
                    title: {
                        display: true,
                        text: 'Chart.js Line Chart - Multi Axis'
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }, {
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'right',
                            id: 'y-axis-2',

                            // grid line settings
                            gridLines: {
                                drawOnChartArea: false, // only want the grid lines for one axis to show up
                            },
                        }],
                    }
                }
            });
        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            lineChartData.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return randomScalingFactor();
                });
            });

            window.myLine.update();
        });
    </script>
</body>

</html>

结果是：

我还有最后一个问题，lineChartData变量必须使用自定义数据在.cs文件中创建，我是如何做到的？

我发现很多人在Xamarin.Forms中使用js图表时都有这个问题，所以我从HybridWeb view和一些Gists online中获得了一些灵感，并创建了一个Nuget包来解决这个问题

它将允许您在C中配置图表，并在WebView中将它们转换为chart.js图表。在写这篇文章时，它是相当新的，但它有助于使用CHart.js解决主线用例。

当我直接使用你提供的webview链接时，我看不到这个图表。@LeonLu MSFT@LeonLu MSFT如何从c端创建图表？我建议你使用oxyplot来实现它，@LeonLu MSFT是的，我用oxyplot实现它，但是没有很好的用户体验，也没有在点击某个点时显示其价值的功能