Javascript 无法绑定并排dxchart(devextreme JS图表)
我无法在我的项目中绑定并排图表。 虽然我已经成功地使用了条形图、气泡图和量规图,但我发现很难找出为什么我无法绑定并排图。这是我的MVC视图Javascript 无法绑定并排dxchart(devextreme JS图表),javascript,ajax,charts,devexpress,devextreme,Javascript,Ajax,Charts,Devexpress,Devextreme,我无法在我的项目中绑定并排图表。 虽然我已经成功地使用了条形图、气泡图和量规图,但我发现很难找出为什么我无法绑定并排图。这是我的MVC视图 <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/c
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
<div class="media-list is-grid p-10 list-items" data-plugin="animateList" data-animate="fade" data-child="li">
<ul class="blocks blocks-100 blocks-xxl-2 blocks-xl-2 blocks-lg-2 blocks-md-2 blocks-sm-2" data-plugin="animateList" data-child=">li">
<li>
<div class="panel">
<div class="panel-body p-10 custom-Pb">
<div id="barChartz1" style="width:100%"></div>
</div>
</div>
</li>
<li>
<div class="panel">
<div class="panel-body p-10 custom-Pb">
<div id="barChartz2" style="width:100%"></div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="~/Scripts/bundle.js" charset="utf-8"></script>
<script>
var MOAPIURL = '';
var StoryCardContext = '';
var Chart1Obj1 = [];
var Chart1Obj2 = [];
var Panel1Id='';
var Panel2Id='';
var Story1Id='';
var Story2Id='';
var Chart1Name = '';
var Chart2Name = '';
var Chart1YAxis = '';
var Chart2YAxis = '';
var Chart3YAxis = '';
var Chart4YAxis = '';
var Chart5YAxis = '';
var RadioLakhMioValue = '';
var ChartColor1 = "";
var ChartColor2 = "";
var ChartColor3 = "";
$(document).ready(
function ()
{
MOAPIURL = '@System.Configuration.ConfigurationManager.AppSettings["MOAPIURL"]';
$('#DashBoardName').text('@ViewBag.DashBoardName');
StoryCardContext = '';
Chart1Obj1 = [];
Chart1Obj2 = [];
if(@ViewBag.Menu=='20')
{
Panel1Id='1';
Panel2Id='2';
Story1Id='17';
Story2Id='18';
}
DisplayStoryCards(@ViewBag.Menu);
});
function JsonObjectSlice(result, TopCount) {
var StoryCardContext = JSON.parse(JSON.stringify(result));
var top10 = StoryCardContext.sort(function (a, b) { return a.MetricValue1 < b.MetricValue1 ? 1 : -1; })
.slice(0, TopCount);
return top10;
}
function DisplayStoryCards(MenuId) {
$.ajax({
url: MOAPIURL + 'Home/GetStoryCardInfo/' + MenuId + "",
async: false,
type: 'get',
dataType: 'json',
success: function (data) {
StoryCardContext = data;
BuildStoryCardByID(data);
},
error: function (data) {
alert('err');
}
});
function BuildStoryCardByID(data) {
var ids = Enumerable.From(data).Select("$.StoryCardID").Distinct().ToArray();
for (j = 0; j < ids.length; j++) {
var queryResult = Enumerable.From(data).Where(function (x) { return (x.StoryCardID == ids[j] && x.IsDefault == 'Y'); }).ToArray();
GetInputParameters(queryResult, j + 1);
}
}
}
function GetInputParameters(data, Sequence) {
var DefaultTopCount = 10;
var url = MOAPIURL;
var reqobj = {};
var ApiMethod = '';
var StoryCardName = '';
var title = '';
var YAxis = "";
var SeriesColor = "#AF7AC5";//"#F7DC6F";//#82E0AA";//"#EC7063";// "#E74C3C";
if (Sequence == "1") {
SeriesColor = "#EC7063";// "#E67E22";
ChartColor1 = "#EC7063";
}
if (Sequence == "2") {
SeriesColor = "#008ae6";//"#2ECC71 e95949";
ChartColor2 = "#008ae6";
}
if (Sequence == "3") {
SeriesColor = "#b35900";
ChartColor3 = "#b35900";
}
if (Sequence == "4") {
SeriesColor = "#00cccc";
}
for (var i = 0; i < data.length; i++) {
ApiMethod = data[i].APIMethod;
StoryCardName = data[i].Description;
title = data[i].Title + data[i].FilterValue;
reqobj[data[i].ParamTxt] = data[i].ParamVal;
YAxis = data[i].Name;
}
url = url + ApiMethod;
StoryCardName = "#" + StoryCardName + Sequence;
var toolDiv = "#toolDiv" + Sequence;
reqobj["Searchfilters"] = getFinalSearchCriteria();//GetSearchFilter(); //need to call search filter
BindChartWithData(StoryCardName, title, url, reqobj, DefaultTopCount, YAxis, SeriesColor);
}
function BindChartWithData(divid, title, myurl, StoryCardContext, TopCount, YAxis, SeriesColor) {
$.ajax({
url: myurl,
type: 'POST',
async: false,
//contentType: 'application/json; charset=utf-8',
data: StoryCardContext,
success: function (result) {
if (divid == "#barChartz1") {
Chart1Name = title;
Chart1Obj1 = result;
Chart1YAxis = YAxis;
}
if (divid == "#barChartz2") {
Chart2Name = title;
Chart1Obj2 = result;
Chart2YAxis = YAxis;
}
var res = result;
if (divid == "#barChartz1" || divid == "#barChartz2") {
if(divid == "#barChartz1")
{
TopCount=$('#txtTopCount1').val();
}
if(divid == "#barChartz2")
{
TopCount=$('#txtTopCount2').val();
}
res = JsonObjectSlice(res, TopCount);
}
EntryPoint.SideBySideBar(divid, title, res, YAxis, SeriesColor, 'state', 'year2004','year2001');
},
error: function (response) {
if (response.status == '500') {
CommonAlert()
}
}
});
}
</script>
我可以肯定ajax调用是成功的,执行甚至会移动到EntryPoint.SideBySideBar(divid、title、res、YAxis、SeriesColor、state、year2004、year2001);执行时没有任何异常,但图表不绑定
这是我的JS,我将数据与图表绑定在一起
var $ = require('jquery');
require('devextreme/viz/bar_gauge');
require('devextreme/viz/chart');
require('jszip');
SideBySideBar: function CreateSideBySideChart(id, Title, dataset, YAxis, SeriesColor, XParam, YParam1, YParam2) {
$(id).dxChart({
dataSource: dataset,
commonSeriesSettings: {
argumentField: 'state',
type: "bar",
hoverMode: "allArgumentPoints",
selectionMode: "allArgumentPoints",
label: {
visible: true,
format: {
type: "fixedPoint",
precision: 2
}
}, bar: {
color: SeriesColor
},
},
series: [
{ valueField: "year2004", name: "2004" },
{ valueField: "year2001", name: "2001" }],
title: Title,
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
"export": {
enabled: true
}
});
}
我已经根据您的配置和数据源转储创建了一个,运行良好。我想你没有提到一些重要的细节,这些细节是复制这个问题所必需的。检查此示例以确定缺少哪些详细信息。@NikitaK我没有提到的是,在我的旁边代码上面,我还有其他与图表相关的代码,我觉得这些代码不会影响我的问题。如果您坚持,我可以提供包含所有图表相关绑定的jscode。但这个样本并没有复制它。您可以分叉此示例并对其进行更新,以说明缺少的设置。我根据您的配置和数据源转储创建了一个示例,它运行良好。我想你没有提到一些重要的细节,这些细节是复制这个问题所必需的。检查此示例以确定缺少哪些详细信息。@NikitaK我没有提到的是,在我的旁边代码上面,我还有其他与图表相关的代码,我觉得这些代码不会影响我的问题。如果您坚持,我可以提供包含所有图表相关绑定的jscode。但这个样本并没有复制它。您可以分叉此示例并对其进行更新,以说明缺少的设置。
var $ = require('jquery');
require('devextreme/viz/bar_gauge');
require('devextreme/viz/chart');
require('jszip');
SideBySideBar: function CreateSideBySideChart(id, Title, dataset, YAxis, SeriesColor, XParam, YParam1, YParam2) {
$(id).dxChart({
dataSource: dataset,
commonSeriesSettings: {
argumentField: 'state',
type: "bar",
hoverMode: "allArgumentPoints",
selectionMode: "allArgumentPoints",
label: {
visible: true,
format: {
type: "fixedPoint",
precision: 2
}
}, bar: {
color: SeriesColor
},
},
series: [
{ valueField: "year2004", name: "2004" },
{ valueField: "year2001", name: "2001" }],
title: Title,
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center"
},
"export": {
enabled: true
}
});
}