WinRTXamlToolkit.Controls.DataVisualization.Charting無法在.appx軟件包上工作

Question

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

圖表在手機中的調試模式下正常工作。

但是，當我嘗試創建應用程序包，並在我的手機中使用部署工具安裝相同的，在這種情況下，圖表不起作用。

應用程序沒有崩潰，但帶有圖表控件的頁面未打開。

請找到下面的代碼

<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函數，這反過來又使我

選擇的圖形。

C＃代碼來設置靜態html頁面到網頁視圖

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 
     }); 

    } 

C＃代碼來傳遞數據的JavaScript功能

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); 
     } 
    } 

所以問題解決了！