Question

我想将外部json文件中的Nativescript（RadCartesianChart）属性加载到我的主xml文件中。如何从外部json文件调用此RadCartesianChart属性？外部json文件应如下所示： { ＆＃34;标题＆＃34;：＆＃34;图表＆＃34 ;, ＆＃34;图型＆＃34;：＆＃34;线＆＃34 ;, ＆＃34; x轴＆＃34;：＆＃34;一个月＆＃34 ;, ＆＃34; y轴＆＃34;：＆＃34;量＆＃34; }

这是我当前的xml文件：

<Page 
loaded="pageLoaded" class="page" 
xmlns="http://www.nativescript.org/tns.xsd" 
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:sd="nativescript-pro-ui/sidedrawer"
xmlns:chart="nativescript-pro-ui/chart" 
>

<ActionBar title="MyApp" class="action-bar"/> 

<StackLayout class="home-panel">
      <Label textWrap="true" text="OVERVIEW" class="overview"/>
      <Label textWrap="true" text="Sales Report" class="graph-desc"/>
        <GridLayout class= "gLayout" rows="*"  height="800px" width="1300px">
            <chart:RadCartesianChart row="0">
                <chart:RadCartesianChart.series class="Line">
                    <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="{{ categoryProperty }}" valueProperty="{{ valueProperty }}">
                        <chart:LineSeries.horizontalAxis>
                            <chart:CategoricalAxis/>
                        </chart:LineSeries.horizontalAxis>
                        <chart:LineSeries.verticalAxis>
                            <chart:LinearAxis/>
                        </chart:LineSeries.verticalAxis>
                    </chart:LineSeries>
                </chart:RadCartesianChart.series>
            </chart:RadCartesianChart>
        </GridLayout>

        <GridLayout rows="*" xmlns:chart="nativescript-pro-ui/chart" height="800px" width="1300px">
        <chart:RadPieChart row="0" allowAnimation="true" row="0">
            <chart:RadPieChart.series>
                <chart:PieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" items="{{ categoricalSource }}" valueProperty="Amount"
                 legendLabel="Department" />
            </chart:RadPieChart.series>
            <chart:RadPieChart.legend>
                <chart:RadLegendView position="Right" title="Dep" offsetOrigin="TopRight" width="110" enableSelection="true" />
            </chart:RadPieChart.legend>
        </chart:RadPieChart>
    </GridLayout>
    </StackLayout>

Answer 1

根据https://docs.nativescript.org/core-concepts/data-binding

在你的js文件中添加

// Either import your JSON here or...
var OptionsModel = require("./test.json");

// call GetString to get it from server or external source.
// and add it to OptionsModel.

// All the variables you wish to import in the xml add it to pageBinding as an object.
// then you can use {{'options or model or whatever name you give'.'value you want to access inside it'}}

page.bindingContext = {
  model: homeViewModel,
  options: OptionsModel
};

在xml中添加

{{ model.categoricalSource }} or {{options.title}} to access values

如何从json文件加载Nativescript图表属性到xml文件？

1 个答案: