Canvas Js 在每个栏上写入不同的值 C# Mvc

Question

如何在每个条的内部和外部写入不同的值？

示例数据

对于单个柱状图是这样的

X=21538, Y=25666 , Name = 'July'

现在图形应该像这样呈现

预计

当前

Class

   public class DataPoint
 {
    public DataPoint(string label, double y)
    {
        this.Label = label;
        this.Y = y;
     
       // this.X = x;
    }

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "label")]
    public string Label = "";




    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> Y = null;


}

另外，当我尝试使用 x 作为另一个点时，图形显示异常结果。请帮忙。

Answer 1

我找到的这个问题的解决方案是。

 var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
    text: '@(Model.topTitleChart)'
},
axisY: {
    title:  '@(Model.leftTitleChart)'
},

data: [{
    type: "column",
    indexLabel: "{innerValue}",
    indexLabelPlacement: "inside",
    dataPoints: @Html.Raw(Model.dataPoints)
}]
        });
addIndexLabel();
chart.render();
function addIndexLabel() {
    chart.options.data.push({ type: "scatter", color: "transparent", toolTipContent: null, dataPoints: [] });
    for (var i = 0; i < chart.options.data[0].dataPoints.length; i++)
        chart.options.data[1].dataPoints.push({ x: chart.options.data[0].dataPoints[i].x, y: chart.options.data[0].dataPoints[i].y, indexLabel: chart.options.data[0].dataPoints[i].outerValue });
}

Class

  [DataContract]
   public class DataPoint
   {
      public DataPoint(string x, double y,string innerval,string outerval)
      {
        this.label = x;
        this.y = y;
        this.innerValue = innerval;
        this.outerValue = outerval;


       // this.X = x;
    }

    [DataMember(Name = "label")]
    public string label { get; set; }

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "y")]
    public Nullable<double> y = null;

    [DataMember(Name = "outerValue")]
    public string outerValue { get; set; }

    [DataMember(Name = "innerValue")]
    public string innerValue { get; set; }


}

结果

Canvas Js 在每个栏上写入不同的值 C# Mvc

Canvas Js Write Different Value On Each Bar C# Mvc

javascript

c#

canvasjs