c# - WinRTXamlToolkit.Controls.DataVisualization.Charting 不适用于 .appx 包

Question

我在我的 Windows Phone 8.1 winrt 应用程序中使用 WinRTXamlToolkit.Controls.DataVisualization.Charting。

图表在手机的 Debug模式下运行良好。

但是当我尝试创建应用程序包并使用部署工具在我的手机中安装相同的应用程序包时，在这种情况下图表无法正常工作。

应用没有崩溃，但是带有图表控件的页面没有打开。

请找到下面的代码

<Charting:Chart Name="LineChart"
                            Grid.Column="1"
                            Margin="0">
                <Charting:Chart.LegendStyle>
                    <Style TargetType="datavis:Legend">
                        <Setter Property="Width"
                                Value="0" />
                     </Style>
                </Charting:Chart.LegendStyle>
                <Charting:Chart.Axes>
                    <Charting:CategoryAxis Orientation="X"
                                           Location="Bottom"
                                           Title="{Binding x_axis}"
                                           ShowGridLines="True"
                                           Foreground="{StaticResource DarkGrayBrush}"
                                           x:Name="xAxis">
                        <Charting:CategoryAxis.TitleStyle>
                            <Style TargetType="datavis:Title">
                                <Setter Property="FontSize"
                                        Value="16" />
                                <Setter Property="HorizontalAlignment"
                                        Value="Center" />
                                <Setter Property="Margin"
                                        Value="0,10,0,0" />
                            </Style>
                        </Charting:CategoryAxis.TitleStyle>
                        <Charting:CategoryAxis.AxisLabelStyle>
                            <Style TargetType="Charting:AxisLabel">
                                <Setter Property="Foreground"
                                        Value="{StaticResource DarkGrayBrush}"></Setter>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Charting:AxisLabel">
                                            <TextBlock Text="{TemplateBinding FormattedContent}"
                                                       TextAlignment="Right"
                                                       TextWrapping="Wrap"
                                                       Width="50"
                                                       Margin="-40,-5,0,26"
                                                       RenderTransformOrigin="1,.5">
                                                <TextBlock.RenderTransform>
                                                    <RotateTransform Angle="300" />
                                                </TextBlock.RenderTransform>
                                            </TextBlock>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Charting:CategoryAxis.AxisLabelStyle>
                        <Charting:CategoryAxis.GridLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke"
                                        Value="{StaticResource GreyBrush}" />
                                <Setter Property="StrokeDashArray"
                                        Value="2" />
                            </Style>
                        </Charting:CategoryAxis.GridLineStyle>
                    </Charting:CategoryAxis>
                    <Charting:LinearAxis Orientation="Y"
                                         x:Name="yAxis"
                                         Foreground="{StaticResource DarkGrayBrush}"
                                         Title="{Binding y_axis}"
                                         ShowGridLines="True">
                        <Charting:LinearAxis.TitleStyle>
                            <Style TargetType="datavis:Title">
                                <Setter Property="FontSize"
                                        Value="16" />
                                <Setter Property="HorizontalAlignment"
                                        Value="Center" />
                                <Setter Property="Margin"
                                        Value="10" />
                            </Style>
                        </Charting:LinearAxis.TitleStyle>
                        <Charting:LinearAxis.AxisLabelStyle>
                            <Style TargetType="Charting:AxisLabel">
                                <Setter Property="Foreground"
                                        Value="{StaticResource DarkGrayBrush}"></Setter>
                            </Style>
                        </Charting:LinearAxis.AxisLabelStyle>
                        <Charting:LinearAxis.GridLineStyle>
                            <Style TargetType="Line">
                                <Setter Property="Stroke"
                                        Value="{StaticResource GreyBrush}" />
                                <Setter Property="StrokeDashArray"
                                        Value="2" />
                            </Style>
                        </Charting:LinearAxis.GridLineStyle>
                    </Charting:LinearAxis>
                </Charting:Chart.Axes>
                <Charting:ColumnSeries  Margin="0"
                                        IndependentValuePath="label"
                                        IsSelectionEnabled="True"
                                        DependentValuePath="refilled">
                    <Charting:ColumnSeries.DataPointStyle>
                        <Style TargetType="Charting:ColumnDataPoint">
                            <Setter Property="Background"
                                    Value="{StaticResource columnBrush}" />
                        </Style>
                    </Charting:ColumnSeries.DataPointStyle>
                </Charting:ColumnSeries>
                <Charting:LineSeries Margin="0"
                                     IndependentValuePath="label"
                                     DependentValuePath="text"
                                     IsSelectionEnabled="True">
                    <Charting:LineSeries.PolylineStyle>
                        <Style TargetType="Polyline">
                            <Setter Property="StrokeThickness"
                                    Value="2" />
                            <Setter Property="Stroke"
                                    Value="{StaticResource BrownBrush}" />
                        </Style>
                    </Charting:LineSeries.PolylineStyle>
                    <Charting:LineSeries.DataPointStyle>
                        <!--<Style TargetType="Charting:LineDataPoint">
                            <Setter Property="Background"
                                    Value="{StaticResource BrownBrush}" />
                            <Setter Property="BorderThickness"
                                    Value="1" />
                        </Style>-->
                        <Style TargetType="Control">
                            <Setter Property="Width"
                                    Value="10" />
                            <Setter Property="Height"
                                    Value="10" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Charting:LineDataPoint">
                                        <Grid Opacity="1"
                                              ToolTipService.Placement="Left"
                                              ToolTipService.ToolTip="test">
                                            <Ellipse StrokeThickness="1"
                                                     Fill="{StaticResource BrownBrush}" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Charting:LineSeries.DataPointStyle>
                </Charting:LineSeries>
            </Charting:Chart>

下面是c#代码

(LineChart.Series[1] as LineSeries).ItemsSource = listItem;
(LineChart.Series[0] as ColumnSeries).ItemsSource = listItem;

Answer 1

我无法使用 WinRTXamlToolkit.Controls.DataVisualization.Charting 解决问题。

但我找到了一个更有效的替代方法。

我在页面中使用了 WebView 控件，导航设置为静态 Html 文件。

现在在该 Html 文件中，我使用了 HighCharts ( http://www.highcharts.com/ ) 用于 Web 和一些 Javascript 函数。

使用 WebView.ScriptNotify 和 WebView.InvokeScriptAsync ，我发送了

图形数据到 javascript 函数，这反过来呈现我的图形

选择。

将静态html页面设置为Webview的c#代码

Uri url = webGraph.BuildLocalStreamUri("MyTag", "index.html");
StreamUriWinRTResolver myResolver = new StreamUriWinRTResolver();
webView.NavigateToLocalStreamUri(url, myResolver);

index.html引用了jquery和highcharts.js

<div id="container">
    <div id="main"></div>
</div>

$(function () {
        window.external.notify("getY");
    });

 function getYValue(arguments) {
        var json_data = JSON.parse(arguments)
        y_value = $.map(json_data, function (el) { return el });
        loadGraph();
    }

function loadGraph() {

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'main',
            },

            xAxis: {
                title: {
                    text: 'xAxis'
                },
                categories: x_value
            },
            yAxis: {
                title: {
                    text: 'yAxis'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: yAxis,
                color: '#000',
                data: y_value
            }] //series
        }); 

    }

将数据传递给 javascript 函数的 C# 代码

async private void webView_ScriptNotify(object sender, NotifyEventArgs e)
    {
       if (e.Value.ToLower().Equals("gety"))
        {

            string sValue = JsonConvert.SerializeObject(lstY) 
             //lstY is list of Y values in array;

            List<string> lstValue = new List<string>() { sValue };

            await webGraph.InvokeScriptAsync("getYValue", lstValue);
        }
    }

问题解决了!