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

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

样本数据

对于单杠来说

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

现在，图形应该呈现如下所示

预期的

当前

课程

   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;


}

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


}

公共类数据点
{
公共数据点（字符串标签，双y）
{
这个标签=标签；
这个。Y=Y；
//这个.X=X；
}
//显式设置序列化为JSON时要使用的名称。
[DataMember（Name=“label”）]
公共字符串标签=”；
//显式设置序列化为JSON时要使用的名称。
[数据成员（Name=“y”）]
公共可空Y=null；
}

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

---

请帮忙。

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

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

var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
exportEnabled:true，
主题：“light2”、“light1”、“light2”、“dark1”、“dark2”
标题：{
文本：“@（型号.topTitleChart）”
},
axisY：{
标题：“@（型号：leftTitleChart）”
},
数据：[{
键入：“列”，
indexLabel:“{innerValue}”，
indexLabelPlacement:“内部”，
dataPoints:@Html.Raw（Model.dataPoints）
}]
});
addIndexLabel（）；
chart.render（）；
函数addIndexLabel（）{
chart.options.data.push（{type:“scatter”，color:“transparent”，toolTipContent:null，dataPoints:[]}）；
对于（var i=0；i

课程

   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;


}

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


}

[DataContract]
公共类数据点
{
公共数据点（字符串x，双y，字符串innerval，字符串outerval）
{
这个标签=x；
这个。y=y；
this.innerValue=innerval；
this.outerValue=outerval；
//这个.X=X；
}
[DataMember（Name=“label”）]
公共字符串标签{get；set；}
//显式设置序列化为JSON时要使用的名称。
[数据成员（Name=“y”）]
公共可空y=null；
[DataMember（Name=“outerValue”）]
公共字符串outerValue{get；set；}
[DataMember（Name=“innerValue”）]
公共字符串内部值{get；set；}
}

结果

---

完全不清楚您是如何绘制图形的。您期望的图形，我以前从未见过，因此我怀疑库制造商是否会考虑到这一点。换句话说，canvasjs无法做到这一点。您知道这样的图表的名称吗？实际上，此图表是在excel上生成的。请显示您目前正在使用的创建图表的代码。显示所有可能的图表类型。不确定库是否能准确地复制您想要的内容。也许考虑把信息稍微不同的方式，但传达相同的东西。