试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误 [英] Trying to combine two amcharts graphs, but getting "Data fields for series are not properly defined." error

查看：44 发布时间：2021/5/19 19:38:29 javascript amcharts4

本文介绍了试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将两个图表的图表组合成一个包括滑块的图表.但是我得到序列的数据字段未正确定义".错误.

这些是每个图形的独立提琴代码.

这就是我要实现的目标.

这是我的代码:

  am4core.useTheme(am4themes_animated);//主题结束var chart = am4core.create("chartdiv"，am4charts.XYChart)；chart.hiddenState.properties.opacity = 0;//这会创建初始淡入chart.paddingRight = 30;chart.dateFormatter.inputDateFormat ="mm:ss";var colorSetAgent = new am4core.ColorSet();colorSetAgent.saturation = 0.4;var colorSetCustomer = new am4core.ColorSet();colorSetCustomer.saturation = 0.4;chart.data = [{类别":模块#1"，"start":"0"，"end":"10"，颜色":colorSetAgent.getIndex(2)，任务":代理"，值":4500}，{类别":模块#1"，开始":"12"，"end":"17"，颜色":colorSetCustomer.getIndex(1)，任务":客户"，值":2690}，{类别":模块#1"，开始":"25"，"end":"38"，颜色":colorSetAgent.getIndex(2)，任务":代理"，值":3370}，{类别":模块#1"，开始":"42"，结束":"50"，颜色":colorSetCustomer.getIndex(1)，任务":客户"，值":4510}];chart.dateFormatter.dateFormat ="ss";chart.dateFormatter.inputDateFormat ="ss";var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category ="category";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.inversed = true;var dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.minGridDistance = 70;dateAxis.baseInterval = {count:1，timeUnit:"second"};dateAxis.renderer.tooltipLocation = 0;var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());函数createSeries(field，name){var series = chart.series.push(new am4charts.LineSeries());series.dataFields.valueY =字段;series.dataFields.dateX ="end";series.name =名称;series.tooltipText ="{dateX}:[b] {valueY} [/]";series.strokeWidth = 2;var bullet = series.bullets.push(new am4charts.CircleBullet());bullet.circle.stroke = am4core.color(#fff");bullet.circle.strokeWidth = 2;}createSeries("value"，"Series#1")；chart.cursor =新的am4charts.XYCursor();var series1 = chart.series.push(new am4charts.ColumnSeries());series1.columns.template.height = am4core.percent(70);series1.columns.template.tooltipText ="{task}";series1.dataFields.openDateX =开始";series1.dataFields.dateX ="end";series1.dataFields.categoryY ="category";series1.columns.template.propertyFields.fill =颜色";//从数据中获取颜色series1.columns.template.propertyFields.stroke =颜色";series1.columns.template.strokeOpacity = 1;chart.scrollbarX =新的am4core.Scrollbar();

这是我的

更新了

更新 JSFIDDLE

解决方案

尝试添加series.yAxis = valueAxis;到您的createSeries()

添加此内容以供将来参考.

 //主题开始am4core.useTheme(am4themes_animated);//主题结束var chart = am4core.create("chartdiv"，am4charts.XYChart);var data = [];var price = 100;var数量= 1000；对于(var i = 0; i< 300; i ++){价格+ = Math.round((Math.random()< 0.5?1:-1)* Math.random()* 100);数量+ = Math.round((Math.random()< 0.5?1:-1)* Math.random()* 1000);data.push({date:new Date(2000，1，i)，价格:价格，数量:数量});}var interfaceColors = new am4core.InterfaceColorSet();chart.data =数据;//下一行使值轴垂直排列.chart.leftAxesContainer.layout =垂直";//如果要更改轴的顺序，请取消注释该行//chart.bottomAxesContainer.reverseOrder = true;var dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.ticks.template.length = 8;dateAxis.renderer.ticks.template.strokeOpacity = 0.1;//dateAxis.renderer.grid.template.disabled = true;dateAxis.renderer.ticks.template.disabled = false;dateAxis.renderer.ticks.template.strokeOpacity = 0.2;chart.leftAxesContainer.pixelPerfect = true;dateAxis.pixelPerfect = true;dateAxis.renderer.pixelPerfect = true;dateAxis.renderer.gridContainer.layout =绝对";//这两条线使轴最初被放大//dateAxis.start = 0.7;//dateAxis.keepSelection = true;var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.tooltip.disabled = true;valueAxis.zIndex = 1;valueAxis.renderer.baseGrid.disabled = true;//轴的高度valueAxis.height = am4core.percent(60);valueAxis.renderer.inside = true;valueAxis.renderer.labels.template.verticalCenter =底部";valueAxis.renderer.labels.template.padding(2,2,2,2);//valueAxis.renderer.maxLabelPosition = 0.95;valueAxis.renderer.fontSize ="0.8em"//取消注释这些线以用某种颜色填充此轴的绘图区域valueAxis.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;var series = chart.series.push(new am4charts.LineSeries());series.dataFields.dateX =日期";series.dataFields.valueY =价格";series.tooltipText ="{valueY.value}";series.name =系列1";var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());valueAxis2.tooltip.disabled = true;//轴的高度valueAxis2.height = am4core.percent(40);valueAxis2.zIndex = 3//这会使面板之间产生间隙valueAxis2.marginTop = 30;valueAxis2.renderer.baseGrid.disabled = true;valueAxis2.renderer.inside = true;valueAxis2.renderer.labels.template.verticalCenter =底部";valueAxis2.renderer.labels.template.padding(2,2,2,2);//valueAxis2.renderer.maxLabelPosition = 0.95;valueAxis2.renderer.fontSize ="0.8em"//取消注释这些线以用某种颜色填充此轴的绘图区域valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;var series2 = chart.series.push(new am4charts.ColumnSeries());series2.columns.template.width = am4core.percent(50);series2.dataFields.dateX =日期";series2.dataFields.valueY =数量";series2.yAxis = valueAxis2;series2.tooltipText ="{valueY.value}";series2.name =系列2";chart.cursor =新的am4charts.XYCursor();chart.cursor.xAxis = dateAxis;var scrollbarX = new am4charts.XYChartScrollbar();scrollbarX.series.push(series);scrollbarX.marginBottom = 20;chart.scrollbarX = scrollbarX;让矩形= chart.plotContainer.createChild(am4core.Rectangle)rectangular.fillOpacity = 1;矩形.宽度= am4core.percent(100);矩形.填充= am4core.color(#ffffff")rectangular.isMeasured = false;radius.height = 29;radius.zIndex = 1000;valueAxis2.events.on("positionchanged"，function(){矩形.y = valueAxis2.pixelY-矩形.pixelHeight-1;})

  body {字体家族:-apple-system，BlinkMacSystemFont，"Segoe UI"，Roboto，Helvetica，Arial，sans-serif，"Apple Color Emoji"，"Segoe UI Emoji"，"Segoe UI Symbol"；}#chartdiv {宽度:100％;高度:600像素；}

 <脚本src ="https://www.amcharts.com/lib/4/core.js"></脚本>< script src ="https://www.amcharts.com/lib/4/charts.js"></script>< script src ="https://www.amcharts.com/lib/4/themes/animated.js"></script>< div id ="chartdiv"></div>

来源: https://codepen.io/team/amcharts/pen/QYMREK

I am trying to combine two graphs of amcharts into one including the slider. But I am getting the "Data fields for series are not properly defined." error.

These are the separate fiddle code for each graphs.

FIDDLE

FIDDLE

And this is what I want to achieve.

This is my code:

am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "mm:ss";

var colorSetAgent = new am4core.ColorSet();
colorSetAgent.saturation = 0.4;

var colorSetCustomer = new am4core.ColorSet();
colorSetCustomer.saturation = 0.4;

chart.data = [ {
  "category": "Module #1",
  "start": "0",
  "end": "10",
  "color": colorSetAgent.getIndex(2),
  "task": "Agent",
  "value": 4500
}, {
  "category": "Module #1",
  "start": "12",
  "end": "17",
  "color": colorSetCustomer.getIndex(1),
  "task": "Customer",
  "value": 2690
}, {
  "category": "Module #1",
  "start": "25",
  "end": "38",
  "color": colorSetAgent.getIndex(2),
  "task": "Agent",
  "value": 3370
}, {
  "category": "Module #1",
  "start": "42",
  "end": "50",
  "color": colorSetCustomer.getIndex(1),
  "task": "Customer",
  "value": 4510
}];

chart.dateFormatter.dateFormat = "ss";
chart.dateFormatter.inputDateFormat = "ss";

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "second" };
dateAxis.renderer.tooltipLocation = 0;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

function createSeries(field, name) {
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = field;
    series.dataFields.dateX = "end";
    series.name = name;
    series.tooltipText = "{dateX}: [b]{valueY}[/]";
    series.strokeWidth = 2;

    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.circle.stroke = am4core.color("#fff");
    bullet.circle.strokeWidth = 2;
}

createSeries("value", "Series #1");

chart.cursor = new am4charts.XYCursor();

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.height = am4core.percent(70);
series1.columns.template.tooltipText = "{task}";

series1.dataFields.openDateX = "start";
series1.dataFields.dateX = "end";
series1.dataFields.categoryY = "category";
series1.columns.template.propertyFields.fill = "color"; // get color from data
series1.columns.template.propertyFields.stroke = "color";
series1.columns.template.strokeOpacity = 1;

chart.scrollbarX = new am4core.Scrollbar();

This is my fiddle, but I am getting "Data fields for series are not properly defined." error. Kindly help me out here.

UPDATE: After kelvin's suggestion, I am not getting error any more, but now the both charts are integrated into one chart. Like this:

Updated JSFIDDLE

UPDATE: Now, after the demo link provided by kelvin, my chart looks like this:

Update JSFIDDLE

解决方案

Try adding series.yAxis = valueAxis; to your createSeries()

Adding this for future refs.

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);

var data = [];
var price = 100;
var quantity = 1000;
for (var i = 0; i < 300; i++) {
    price += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 100);
    quantity += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 1000);
    data.push({ date: new Date(2000, 1, i), price: price, quantity: quantity });
}

var interfaceColors = new am4core.InterfaceColorSet();

chart.data = data;
// the following line makes value axes to be arranged vertically.
chart.leftAxesContainer.layout = "vertical";




// uncomment this line if you want to change order of axes
//chart.bottomAxesContainer.reverseOrder = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.ticks.template.length = 8;
dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
//dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.ticks.template.disabled = false;
dateAxis.renderer.ticks.template.strokeOpacity = 0.2;

chart.leftAxesContainer.pixelPerfect = true;
dateAxis.pixelPerfect = true;
dateAxis.renderer.pixelPerfect = true;
dateAxis.renderer.gridContainer.layout = "absolute";

// these two lines makes the axis to be initially zoomed-in
//dateAxis.start = 0.7;
//dateAxis.keepSelection = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.zIndex = 1;
valueAxis.renderer.baseGrid.disabled = true;
// height of axis
valueAxis.height = am4core.percent(60);
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.verticalCenter = "bottom";
valueAxis.renderer.labels.template.padding(2,2,2,2);
//valueAxis.renderer.maxLabelPosition = 0.95;
valueAxis.renderer.fontSize = "0.8em"

// uncomment these lines to fill plot area of this axis with some color
valueAxis.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");
valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;


var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "price";
series.tooltipText = "{valueY.value}";
series.name = "Series 1";




var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis2.tooltip.disabled = true;



// height of axis
valueAxis2.height = am4core.percent(40);
valueAxis2.zIndex = 3
// this makes gap between panels
valueAxis2.marginTop = 30;
valueAxis2.renderer.baseGrid.disabled = true;
valueAxis2.renderer.inside = true;
valueAxis2.renderer.labels.template.verticalCenter = "bottom";
valueAxis2.renderer.labels.template.padding(2,2,2,2);
//valueAxis2.renderer.maxLabelPosition = 0.95;
valueAxis2.renderer.fontSize = "0.8em"

// uncomment these lines to fill plot area of this axis with some color
valueAxis2.renderer.gridContainer.background.fill = interfaceColors.getFor("alternativeBackground");
valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(50);
series2.dataFields.dateX = "date";
series2.dataFields.valueY = "quantity";
series2.yAxis = valueAxis2;
series2.tooltipText = "{valueY.value}";
series2.name = "Series 2";

chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;

var scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;

let rectangle = chart.plotContainer.createChild(am4core.Rectangle)
rectangle.fillOpacity = 1;
rectangle.width = am4core.percent(100);
rectangle.fill = am4core.color("#ffffff")
rectangle.isMeasured = false;
rectangle.height = 29;
rectangle.zIndex = 1000;

valueAxis2.events.on("positionchanged", function(){
  rectangle.y = valueAxis2.pixelY - rectangle.pixelHeight - 1;
})

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 600px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

Source :https://codepen.io/team/amcharts/pen/QYMREK

这篇关于试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误 [英] Trying to combine two amcharts graphs, but getting "Data fields for series are not properly defined." error

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误 [英] Trying to combine two amcharts graphs, but getting &quot;Data fields for series are not properly defined.&quot; error

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

试图组合两个amcharts图，但是获得“序列的数据字段未正确定义".错误 [英] Trying to combine two amcharts graphs, but getting "Data fields for series are not properly defined." error

登录关闭