amcharts 不以正确的格式表示数据
amcharts doesn't represent data in right format
我正在从数据库中检索值并将其推送到 amchart (XYChart),x 轴的值无法正常工作。
这是图表代码
var chart5;
function generateChart5(json) {
chart5 = am4core.create("chart5-data", am4charts.XYChart);
chart5.data = json;
var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
function createAxisAndSeries(field, name, opposite, bullet) {
var valueAxis = chart5.yAxes.push(new am4charts.ValueAxis());
var series = chart5.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "time";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tensionX = 0.8;
var interfaceColors = new am4core.InterfaceColorSet();
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
valueAxis.renderer.line.stroke = series.stroke;
valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = opposite;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true; //disables labels
}
createAxisAndSeries("angry", "Angry", true, "circle");
createAxisAndSeries("disgust", "Disgust", true, "triangle");
createAxisAndSeries("happy", "Happy", true, "rectangle");
createAxisAndSeries("neutral", "Neutral", true, "circle");
createAxisAndSeries("sad", "Sad", true, "triangle");
createAxisAndSeries("surprise", "Surprise", true, "rectangle");
createAxisAndSeries("fear", "Fear", true, "rectangle");
chart5.legend = new am4charts.Legend();
chart5.cursor = new am4charts.XYCursor();
};
这就是 json 文件的样子
[{
"time": 1,
"angry": 141,
"disgust": 118,
"happy": 106,
"neutral": 117,
"sad": 138,
"surprise": 132,
"fear": 135
},
.
.
.
.]
这就是图表的样子
amcharts
好吧,我不知道 amcharts 有不同类型的轴。原来是这两行有问题。
var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
series.dataFields.dateX = "time";
我把它们改成了这样:
var dateAxis = chart5.xAxes.push(new am4charts.valueAxis());
series.dataFields.valueX = "time";
非常感谢 xorspark
我正在从数据库中检索值并将其推送到 amchart (XYChart),x 轴的值无法正常工作。
这是图表代码
var chart5;
function generateChart5(json) {
chart5 = am4core.create("chart5-data", am4charts.XYChart);
chart5.data = json;
var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
function createAxisAndSeries(field, name, opposite, bullet) {
var valueAxis = chart5.yAxes.push(new am4charts.ValueAxis());
var series = chart5.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "time";
series.strokeWidth = 2;
series.yAxis = valueAxis;
series.name = name;
series.tooltipText = "{name}: [bold]{valueY}[/]";
series.tensionX = 0.8;
var interfaceColors = new am4core.InterfaceColorSet();
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;
valueAxis.renderer.line.stroke = series.stroke;
valueAxis.renderer.labels.template.fill = series.stroke;
valueAxis.renderer.opposite = opposite;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true; //disables labels
}
createAxisAndSeries("angry", "Angry", true, "circle");
createAxisAndSeries("disgust", "Disgust", true, "triangle");
createAxisAndSeries("happy", "Happy", true, "rectangle");
createAxisAndSeries("neutral", "Neutral", true, "circle");
createAxisAndSeries("sad", "Sad", true, "triangle");
createAxisAndSeries("surprise", "Surprise", true, "rectangle");
createAxisAndSeries("fear", "Fear", true, "rectangle");
chart5.legend = new am4charts.Legend();
chart5.cursor = new am4charts.XYCursor();
};
这就是 json 文件的样子
[{
"time": 1,
"angry": 141,
"disgust": 118,
"happy": 106,
"neutral": 117,
"sad": 138,
"surprise": 132,
"fear": 135
},
.
.
.
.]
这就是图表的样子
amcharts
好吧,我不知道 amcharts 有不同类型的轴。原来是这两行有问题。
var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
series.dataFields.dateX = "time";
我把它们改成了这样:
var dateAxis = chart5.xAxes.push(new am4charts.valueAxis());
series.dataFields.valueX = "time";
非常感谢 xorspark