C# Amcharts javascript

Question

我从 C# 输入类型 List<SummaryUptoToday> 的数据 FinalResult 到 Amcharts 并且这是 SummaryUptoToday

的定义

public class SummaryUptoToday : ICloneable
{
    public List<TradePositionSingle> StockList { get; set; }
    public List<PerformanceSingle> Performance { get; set; }
    public double Commission { get; set; }
    public double PNL { get; set; }
    public double NAV { get; set; }
    public double CashLeft { get; set; }
    public DateTime Date { get; set; }

    public SummaryUptoToday() { }

    object ICloneable.Clone()
    {
        return ObjectCopier.Clone(this);
    }
}

而PerformanceSingle的定义是

public class PerformanceSingle : ICloneable
{
    public MyData Stock { get; set; }
    public int Position { get; set; }
    public int TradePositionToday { get; set; }
    public double Commission { get; set; }
    public double PNL { get; set; }
    public double NAV { get; set; }
    public double PNL2 { get; set; }

    public PerformanceSingle() { }

    object ICloneable.Clone()
    {
        return ObjectCopier.Clone(this);
    }
}

现在我想在FinalResult（可能需要for loop）和

中添加List<PerformanceSingle> Performance中每个术语的一系列图表

Title:  Stock.Name
x-axis: Date
y-axis: PNL2

那我怎么用javascript语言做到这一点如下（这里data是估算的FinalResult）

    function createStockChart(data) {
        var chart = new AmCharts.AmStockChart();

        // DATASETS
        var dataSet1 = new AmCharts.DataSet();
        dataSet1.color = "#b0de09";
        dataSet1.fieldMappings = [{
            fromField: "NAV",
            toField: "NAV"
        }];
        dataSet1.dataProvider = data;
        dataSet1.categoryField = "Date";

        chart.dataSets = [dataSet1];

        // PANELS
        var stockPanel = new AmCharts.StockPanel();
        stockPanel.showCategoryAxis = true;
        stockPanel.title = "NAV";
        stockPanel.eraseAll = false;
        //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

        var graph = new AmCharts.StockGraph();
        graph.title = "NAV";
        graph.valueField = "NAV";
        graph.bullet = "round";
        graph.bulletColor = "#FFFFFF";
        graph.bulletBorderColor = "#00BBCC";
        graph.bulletBorderAlpha = 1;
        graph.bulletBorderThickness = 2;
        graph.bulletSize = 7;
        graph.lineThickness = 2;
        graph.lineColor = "#00BBCC";
        graph.useDataSetColors = false;
        graph.comparable = true;
        graph.compareField = "HSI";
        stockPanel.addStockGraph(graph);

实际上，我输入的数据结构如下：

var data1 = [{
"Date": "2016-07-09",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"StockList": [{"Name": "H1", "PNL2": 20, "NAV2" : 20}, {"Name": "H2", "PNL2": 20, "NAV2" : 20}]
"NAV": 27.55,
"PNL": 12.89
}];

我想做的是首先绘制主图 NAV 和 H1 和 H2 的两个动态图，它们的 PNL2 与 Date

Answer 1

我不是 C# 专家，但 dataProvider 需要是一个 JSON 对象数组。鉴于你想序列化这个：

x-axis: Date
y-axis: PNL2

您的 dataProvider 数组应该是：

[{
  "Date": "...", //string representation of your date, such as "YYYY-MM-DD"
  "PNL2": 10.5,
},
//other array elements omitted
]

有大量关于将 .NET 对象序列化为 JSON 的资源。简短搜索表明 JSON.NET 是为此推荐的框架。

您的图表 valueField 需要与您的 fieldMappings 中的 toField 相对应。您可以将字段映射到相同名称或从不同名称映射到新名称。如果要将PNL2映射到NAV，例如：

dataSet1.fieldMappings = [{
  fromField: "PNL2",
  toField: "NAV"
}]
// ...
graph.valueField = "NAV"; //maps to the toField

为了演示简单起见，我保留了 PNL2 名称并进行了相应调整。 compareField 已删除，因为您只有一个数据集。如果您要比较多个数据集，则可以将其放回原处。我还设置了 dataDateFormat 以匹配 Date categoryField.

中的字符串 YYYY-MM-DD 日期

var data = [{
  "Date": "2016-07-09",
  "PNL2": 28.05
}, {
  "Date": "2016-07-10",
  "PNL2": 30.84
}, {
  "Date": "2016-07-11",
  "PNL2": 22.89
}, {
  "Date": "2016-07-12",
  "PNL2": 26.67
}, {
  "Date": "2016-07-13",
  "PNL2": 21.7
}, {
  "Date": "2016-07-14",
  "PNL2": 24.54
}, {
  "Date": "2016-07-15",
  "PNL2": 24.32
}, {
  "Date": "2016-07-16",
  "PNL2": 31.48
}, {
  "Date": "2016-07-17",
  "PNL2": 29.99
}, {
  "Date": "2016-07-18",
  "PNL2": 33.67
}, {
  "Date": "2016-07-19",
  "PNL2": 24.08
}, {
  "Date": "2016-07-20",
  "PNL2": 34.17
}, {
  "Date": "2016-07-21",
  "PNL2": 32.76
}, {
  "Date": "2016-07-22",
  "PNL2": 28.59
}, {
  "Date": "2016-07-23",
  "PNL2": 21.49
}];




function createStockChart(data) {
  var chart = new AmCharts.AmStockChart();
  chart.dataDateFormat = "YYYY-MM-DD";

  // DATASETS
  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  dataSet1.fieldMappings = [{
    fromField: "PNL2",
    toField: "PNL2"
  }];
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  chart.dataSets = [dataSet1];

  // PANELS
  var stockPanel = new AmCharts.StockPanel();
  stockPanel.showCategoryAxis = true;
  stockPanel.title = "PNL2";
  stockPanel.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  var graph = new AmCharts.StockGraph();
  graph.title = "PNL2";
  graph.valueField = "PNL2";
  graph.bullet = "round";
  graph.bulletColor = "#FFFFFF";
  graph.bulletBorderColor = "#00BBCC";
  graph.bulletBorderAlpha = 1;
  graph.bulletBorderThickness = 2;
  graph.bulletSize = 7;
  graph.lineThickness = 2;
  graph.lineColor = "#00BBCC";
  graph.useDataSetColors = false;
  stockPanel.addStockGraph(graph);

  chart.addPanel(stockPanel);
  chart.write("chartdiv");
}

createStockChart(data);

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>

编辑：要动态创建这些，您只需确保您的图表和 dataSets/dataProviders 指向正确的字段。例如，将所有内容组合成一个数据集：

  //get the valueFields from the first element in the dataProvider array
  var valueFields = [];

  Object.keys(data[0]).forEach(function(field) {
    if (field !== "Date") {
      valueFields.push(field);
    }
  });

  //create your fieldMappings in your dataSet:
  // DATASETS
  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  //create the mappings for each valueField
  dataSet1.fieldMappings = valueFields.map(function(valueField) {
    return {
      fromField: valueField,
      toField: valueField
    };
  });
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  //create your graphs based on the valueFields:
  valueFields.forEach(function(valueField) {

    var graph = new AmCharts.StockGraph();
    graph.title = valueField;
    graph.valueField = valueField;
    // other settings omitted
    stockPanel.addStockGraph(graph);
  });

这是一个演示：

var data1 = [{
  "Date": "2016-07-09",
  "PNL2": 12.84,
  "NAV": 26.28,
  "PNL": 7.61
}, {
  "Date": "2016-07-10",
  "PNL2": 11.62,
  "NAV": 27.55,
  "PNL": 12.89
}, {
  "Date": "2016-07-11",
  "PNL2": 16.95,
  "NAV": 30.66,
  "PNL": 7.91
}, {
  "Date": "2016-07-12",
  "PNL2": 13.5,
  "NAV": 28.9,
  "PNL": 14.58
}, {
  "Date": "2016-07-13",
  "PNL2": 13.26,
  "NAV": 25.72,
  "PNL": 12.47
}, {
  "Date": "2016-07-14",
  "PNL2": 12.29,
  "NAV": 20.53,
  "PNL": 6.27
}, {
  "Date": "2016-07-15",
  "PNL2": 12.86,
  "NAV": 34.96,
  "PNL": 14.28
}, {
  "Date": "2016-07-16",
  "PNL2": 16.34,
  "NAV": 32.99,
  "PNL": 15.31
}, {
  "Date": "2016-07-17",
  "PNL2": 15.85,
  "NAV": 24.26,
  "PNL": 9.79
}, {
  "Date": "2016-07-18",
  "PNL2": 15.09,
  "NAV": 35.05,
  "PNL": 7.54
}, {
  "Date": "2016-07-19",
  "PNL2": 10.52,
  "NAV": 24.09,
  "PNL": 6.72
}, {
  "Date": "2016-07-20",
  "PNL2": 15.99,
  "NAV": 29.35,
  "PNL": 11.47
}, {
  "Date": "2016-07-21",
  "PNL2": 12.31,
  "NAV": 32.26,
  "PNL": 7.16
}, {
  "Date": "2016-07-22",
  "PNL2": 13.77,
  "NAV": 26.18,
  "PNL": 6.46
}, {
  "Date": "2016-07-23",
  "PNL2": 12.13,
  "NAV": 30.22,
  "PNL": 10.94
}];


function createStockChart(data) {
  var chart = new AmCharts.AmStockChart();
  chart.dataDateFormat = "YYYY-MM-DD";
  var valueFields = [];

  //get the valueFields from the first element in the dataProvider array
  Object.keys(data[0]).forEach(function(field) {
    if (field !== "Date") {
      valueFields.push(field);
    }
  });

  
  var dataSet1 = new AmCharts.DataSet();
  dataSet1.color = "#b0de09";
  //create your field mappings for each valueField
  dataSet1.fieldMappings = valueFields.map(function(valueField) {
    return {
      fromField: valueField,
      toField: valueField
    };
  });
  dataSet1.dataProvider = data;
  dataSet1.categoryField = "Date";

  chart.dataSets = [dataSet1];

  // PANELS
  var stockPanel = new AmCharts.StockPanel();
  stockPanel.showCategoryAxis = true;
  stockPanel.title = "PNL2";
  stockPanel.eraseAll = false;
  //stockPanel.addLabel(0, 100, "Click on the pencil icon on top-right to start drawing", "center", 16);

  //create a graph for each valueField
  valueFields.forEach(function(valueField) {
    var graph = new AmCharts.StockGraph();
    graph.title = valueField;
    graph.valueField = valueField;
    graph.bullet = "round";
    graph.bulletColor = "#FFFFFF";
    graph.bulletBorderColor = "#00BBCC";
    graph.bulletBorderAlpha = 1;
    graph.bulletBorderThickness = 2;
    graph.bulletSize = 7;
    graph.lineThickness = 2;
    graph.lineColor = "#00BBCC";
    graph.useDataSetColors = false;
    stockPanel.addStockGraph(graph);
  });

  chart.addPanel(stockPanel);
  chart.write("chartdiv");
}

createStockChart(data1);

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px"></div>

编辑 2：图表不支持嵌套数组。您的 StockList 数组需要展平到顶级对象中。例如：

var data1 = [{
"Date": "2016-07-09",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 26.28,
"PNL": 7.61
}, {
"Date": "2016-07-10",
"H1_PNL2": 20, 
"H1_NAV2" : 20
"H2_PNL2": 20, 
"H2_NAV2" : 20,
"NAV": 27.55,
"PNL": 12.89
}];

从那里您可以使用 H1_PNL2 和 H2_PNL2 作为您的 H1/H2 图表的值字段相应地创建您的图表和数据集。

C# Amcharts javascript

C# Amcharts javascript

c#

amcharts