.NET Highcharts未应用响应规则
我的响应规则未在Highcharts.NET中应用 谁能给我指一下正确的方向吗 我希望在最大宽度为460时应用步长=2 我可以在highcharts对象的x轴上放置step=2,但这会导致图表始终具有2个step。我只希望在应用响应条件时使用此选项 这是我的控制器代码:.NET Highcharts未应用响应规则,highcharts,dotnethighcharts,Highcharts,Dotnethighcharts,我的响应规则未在Highcharts.NET中应用 谁能给我指一下正确的方向吗 我希望在最大宽度为460时应用步长=2 我可以在highcharts对象的x轴上放置step=2,但这会导致图表始终具有2个step。我只希望在应用响应条件时使用此选项 这是我的控制器代码: public ActionResult FundInformation() { var fondsViewModel = new FondsViewModel();
public ActionResult FundInformation()
{
var fondsViewModel = new FondsViewModel();
List<Series> tmpList = new List<Series>();
List<string> colorList = new List<string>();
//var data = fonds.GrafiekData;
List<double> fondsdata = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 54.4, 54.4, 54.4, 54.4, 54.4 };
List<ColumnSeriesData> fondslist = new List<ColumnSeriesData>();
fondsdata.ForEach(p => fondslist.Add(new ColumnSeriesData { Y = p }));
ColumnSeries Cs = new ColumnSeries
{
Name = "Fonds",
Data = fondslist,
Stack = "ul",
};
tmpList.Add(Cs);
colorList.Add("#CCCCCC");
var chartId = $"chart{Guid.NewGuid().ToString("N")}";
Highcharts myChart = new Highcharts()
{
Colors = colorList,
Chart = new Chart
{
ClassName = "grafiek",
//StyledMode = true,
Height = 135,
Type = ChartType.Column,
Events = new ChartEvents
{
//Redraw = "function(e) {console.log(this)}"
}
},
Title = new Title
{
Text = "Fonds"
},
Credits = new Credits
{
Enabled = false
},
Legend = new Legend
{
Enabled = false
},
XAxis = new List<XAxis>
{
new XAxis
{
GridLineWidth= 0,
Min = 1,
Max = Cs.Data.Count(),
TickAmount = Cs.Data.Count(),
Reversed = true,
StartOnTick = true,
Labels = new XAxisLabels
{
Enabled= true,
//Step=2
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
TickAmount = 3,
GridLineWidth = 0.5,
MinorGridLineWidth = 0,
AllowDecimals = false,
Title = new YAxisTitle
{
Enabled = false
},
Labels = new YAxisLabels
{
Enabled = true,
Format = "{value}%",
},
StackLabels = new YAxisStackLabels
{
Enabled = false
}
}
},
Tooltip = new Tooltip
{
Enabled = false,
Shared = true,
Shadow = new Shadow
{
Enabled = false
}
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
PointStart = 1,
PointPadding = 0,
GroupPadding = 0.03,
BorderWidth = 0,
},
Series = new PlotOptionsSeries
{
EnableMouseTracking = false,
States = new PlotOptionsSeriesStates
{
Hover = new PlotOptionsSeriesStatesHover
{
Enabled = false
},
},
DataLabels = new PlotOptionsSeriesDataLabels
{
Enabled = false,
Y = -35,
Rotation = 0,
Align = PlotOptionsSeriesDataLabelsAlign.Center,
Inside = true,
}
}
},
Responsive = new Responsive
{
Rules = new List<ResponsiveRules>
{
new ResponsiveRules
{
Condition = new ResponsiveRulesCondition
{
MaxWidth=460,
},
ChartOptions = new
{
XAxis = new List<XAxis>
{
new XAxis
{
Labels = new XAxisLabels
{
Step = 2,
}
}
},
}
},
}
},
Series = tmpList,
};
myChart.ID = chartId;
fondsViewModel.FondsId = chartId;
fondsViewModel.Chart = myChart;
fondsViewModel.FondsNaam = "Some name fonds";
fondsViewModel.LabelFondsBeschrijvingKnop = "Omschrijving";
fondsViewModel.FondsBeschrijvingContent = "Something something";
fondsViewModel.FondsBeschrijvingUrl = "Something.com";
return View(fondsViewModel);
}
public ActionResult FundInformation()
{
var fondsViewModel=新的fondsViewModel();
List tmpList=新列表();
List colorList=新列表();
//var数据=fonds.GrafiekData;
List fondsdata=新列表{49.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4,54.4,54.4,54.4,54.4,54.4};
List FONDLIST=新列表();
ForEach(p=>fondslist.Add(newcolumnseriesdata{Y=p}));
ColumnSeries Cs=新ColumnSeries
{
Name=“Fonds”,
Data=fondslist,
Stack=“ul”,
};
tmpList.Add(Cs);
颜色列表。添加(“#CCCC”);
var chartId=$“图表{Guid.NewGuid().ToString(“N”)}”;
Highcharts myChart=新的Highcharts()
{
颜色=颜色列表,
图表=新图表
{
ClassName=“grafiek”,
//StyledMode=true,
高度=135,
类型=ChartType.Column,
事件=新图表事件
{
//Redraw=“函数(e){console.log(this)}”
}
},
标题=新标题
{
Text=“Fonds”
},
学分=新学分
{
已启用=错误
},
图例=新图例
{
已启用=错误
},
XAxis=新列表
{
新XAxis
{
GridLineWidth=0,
最小值=1,
Max=Cs.Data.Count(),
TickAmount=Cs.Data.Count(),
相反=正确,
StartOnTick=true,
标签=新标签
{
启用=真,
//步骤=2
}
}
},
YAxis=新列表
{
新亚克斯
{
数量=3,
网格线宽度=0.5,
MinorGridLineWidth=0,
AllowDecimals=false,
Title=新的YAxisTitle
{
已启用=错误
},
标签=新标签
{
启用=真,
Format=“{value}%”,
},
StackLabels=新的StackLabels
{
已启用=错误
}
}
},
工具提示=新工具提示
{
启用=错误,
共享=真,
阴影=新阴影
{
已启用=错误
}
},
PlotOptions=新的PlotOptions
{
Column=新绘图选项Column
{
堆叠=绘图选项ColumnStacking.Normal,
PointStart=1,
点填充=0,
分组填充=0.03,
BorderWidth=0,
},
系列=新绘图选项系列
{
EnableMouseTracking=false,
状态=新绘图选项系列状态
{
悬停=新绘图选项系列状态推送器
{
已启用=错误
},
},
DataLabels=新绘图选项系列DataLabels
{
启用=错误,
Y=-35,
旋转=0,
Align=绘图选项系列数据标签Align.Center,
内=真,
}
}
},
响应=新响应
{
规则=新列表
{
新反应器
{
条件=新响应规则条件
{
最大宽度=460,
},
ChartOptions=新建
{
XAxis=新列表
{
新XAxis
{
标签=新标签
@model WebApplication3.Controllers.FondsViewModel
@using Highsoft.Web.Mvc.Charts.Rendering
@{
var renderer = new HighchartsRenderer(Model.Chart, "somekey");
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="pensioen-bij-row verdeling">
<div class="fondsdetail">
<div id="@Model.FondsId" class="grafiek"></div>
@Html.Raw(renderer.RenderHtml(false))
<button class="fondsbeschrijving">@Model.LabelFondsBeschrijvingKnop</button>
<div class="beschrijving">
@Html.Raw(Model.FondsBeschrijvingContent)
<a class="externe-link" href="@Model.FondsBeschrijvingUrl" target="_blank"><span>@Model.FondsNaam</span></a>
</div>
</div>
</div>
ChartOptions = new { xAxis = new {
labels = new { step = 2 }
} }