C# Amcharts javascript

本文关键字：javascript Amcharts | 更新日期: 2023-09-27 18:13:15

我将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

C# Amcharts javascript

我不是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设置为与日期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>

编辑:要动态创建这些，你只需要确保你的图表和数据集/数据提供者指向适当的字段。例如，要将所有内容组合成一个数据集: 
  //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图表的valueFields。

相关文章：