如何拆开图表上的线系列：AMCharts3
How to unstack the line series on a chart: AMCharts3
所以在我的图表上我有条形和线条，我希望条形系列像下图一样堆叠，但我不希望线条系列堆叠。
Example of the current Chart
在示例图像中，前 3 个点的顶线系列值是 100,000，但它位于 150,000，而底线系列的值为 50,000，位于 50,000，所以我相信它们正在堆叠，但我没有不想发生。
我希望图表看起来完全一样，但线系列位于 y 轴上的正确值。
let {dataProvider, displayCurrency} = this.props;
var config = {
"type":"serial",
"categoryField":"category",
"fontFamily":"arial",
"categoryAxis":{
"gridPosition":"start",
"title":"Time",
"titleRotation":0
},
"trendLines":[],
"graphs":[
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Hedging"),
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverUpper",
"title": "Hedging",
"newStack": false,
"type": "column",
"valueField": "hedging"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Maximum Additional Hedging"),
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverAdditional",
"title": "Maximum Additional Hedging",
"type": "column",
"newStack": false,
"valueField": "maxAdditionalHedging",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Forecasted Cashflows"),
"fillAlphas": 1,
"balloonColor": "#B0DE09",
"fillColors": "#B0DE09",
"lineColor": "#B0DE09",
"id": "cfGraph",
"title": "Forecasted Cashflows",
"type": "column",
"newStack": true,
"valueField": "exposure"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Policy Minimum"),
"bullet": "triangleUp",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMin",
"valueAxis": "dollarAxis",
"newStack": true,
"title": "Policy Minimum",
"valueField": "minHedge"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Policy Maximum"),
"bullet": "triangleDown",
"type": "line",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"newStack": true,
"id": "polMax",
"valueAxis": "dollarAxis",
"title": "Policy Maximum",
"valueField": "maxHedge"
}
],
"guides":[],
"valueAxes":[
{"id":"dollarAxis","stackType":"regular","title":"Amount " + displayCurrency}
],
"allLabels":[],
"balloon":{},
"legend":{
"enabled":true,
"useGraphSettings":true,
"spacing": 0,
"valueWidth":15
},
"export":{"enabled":true},
"dataProvider":dataProvider
}
堆叠是通过轴完成的。如果您希望线条不堆叠，请将它们放在一个单独的值轴中，该轴未设置 stackType 并且 link 通过 valueAxis [=34= 到值轴 ID 的图表].您还需要考虑禁用线条的值轴标签、网格并同步 min/max：
graphs:[{
type: "line",
// ...
valueAxis: "dollarAxis-line"
},
// ...
],
valueAxes: [
{
"id": "dollarAxis",
"includeHidden": true,
// ...
},
{
"id": "dollarAxis-line",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0,
}
],
"listeners": [{
"event": "init",
"method": function(e) {
// sync axes
e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.validateData();
}
}]
编辑：
如果您从空图表开始，您可能需要考虑改用 dataUpdated 事件，以便在您更新 dataProvider 后它会重新同步轴。 validateData 方法会触发此事件，因此您需要将此调用包装在检查标志的条件中，以便图表不会无限地调用此方法。
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
下面的演示：
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"fontFamily": "arial",
"categoryAxis": {
"gridPosition": "start",
"title": "Time",
"titleRotation": 0
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverUpper",
"title": "Hedging",
"newStack": false,
"type": "column",
"valueField": "hedging"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverAdditional",
"title": "Maximum Additional Hedging",
"type": "column",
"newStack": false,
"valueField": "maxAdditionalHedging",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"balloonColor": "#B0DE09",
"fillColors": "#B0DE09",
"lineColor": "#B0DE09",
"id": "cfGraph",
"title": "Forecasted Cashflows",
"type": "column",
"newStack": true,
"valueField": "exposure"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleUp",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMin",
"valueAxis": "dollarAxis-line",
"title": "Policy Minimum",
"valueField": "minHedge"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleDown",
"type": "line",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMax",
"valueAxis": "dollarAxis-line",
"title": "Policy Maximum",
"valueField": "maxHedge"
}
],
"guides": [],
"valueAxes": [{
"id": "dollarAxis",
"stackType": "regular",
"includeHidden": true,
"title": "Amount ($)"
},
{
"id": "dollarAxis-line",
"stackType": "none",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true,
"spacing": 0,
"valueWidth": 15
},
"export": {
"enabled": true
},
"dataProvider": [{
"category": "Category 1",
"minHedge": 151218,
"hedging": 111436,
"maxHedge": 236849,
"maxAdditionalHedging": 272065,
"additionalHedging": 233236,
"exposure": 163731
},
{
"category": "Category 2",
"minHedge": 150517,
"hedging": 137299,
"maxHedge": 258805,
"maxAdditionalHedging": 254932,
"additionalHedging": 183495,
"exposure": 111847
},
{
"category": "Category 3",
"minHedge": 158456,
"hedging": 198219,
"maxHedge": 231274,
"maxAdditionalHedging": 259615,
"additionalHedging": 187108,
"exposure": 168738
},
{
"category": "Category 4",
"minHedge": 167931,
"hedging": 173121,
"maxHedge": 263334,
"maxAdditionalHedging": 260449,
"additionalHedging": 229972,
"exposure": 156174
},
{
"category": "Category 5",
"minHedge": 164449,
"hedging": 157823,
"maxHedge": 268980,
"maxAdditionalHedging": 268896,
"additionalHedging": 180031,
"exposure": 100893
},
{
"category": "Category 6",
"minHedge": 166465,
"hedging": 128504,
"maxHedge": 241036,
"maxAdditionalHedging": 269858,
"additionalHedging": 230233,
"exposure": 117158
},
{
"category": "Category 7",
"minHedge": 167117,
"hedging": 110649,
"maxHedge": 229749,
"maxAdditionalHedging": 262671,
"additionalHedging": 201500,
"exposure": 188282
},
{
"category": "Category 8",
"minHedge": 151167,
"hedging": 123489,
"maxHedge": 249919,
"maxAdditionalHedging": 268805,
"additionalHedging": 206302,
"exposure": 120797
},
{
"category": "Category 9",
"minHedge": 154961,
"hedging": 185898,
"maxHedge": 269185,
"maxAdditionalHedging": 271949,
"additionalHedging": 173116,
"exposure": 184312
},
{
"category": "Category 10",
"minHedge": 154385,
"hedging": 141307,
"maxHedge": 234509,
"maxAdditionalHedging": 274889,
"additionalHedging": 216132,
"exposure": 111974
}
],
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
});
function generateData() {
var data = [];
for (var i = 0; i < 10; ++i) {
data.push({
"category": "Category " + (i + 1),
"minHedge": Math.floor(Math.random() * 100000 + 200000),
"hedging": Math.floor(Math.random() * 150000 + 225000),
"maxHedge": Math.floor(Math.random() * 250000 + 200000),
"maxAdditionalHedging": Math.floor(Math.random() * 100000 + 200000),
"additionalHedging": Math.floor(Math.random() * 150000 + 275000),
"exposure": Math.floor(Math.random() * 225000 + 375000)
});
}
chart.dataProvider = data;
chart.validateData();
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
<button onclick="generateData()">Generate Data</button>
所以在我的图表上我有条形和线条，我希望条形系列像下图一样堆叠，但我不希望线条系列堆叠。 Example of the current Chart
在示例图像中，前 3 个点的顶线系列值是 100,000，但它位于 150,000，而底线系列的值为 50,000，位于 50,000，所以我相信它们正在堆叠，但我没有不想发生。
我希望图表看起来完全一样，但线系列位于 y 轴上的正确值。
let {dataProvider, displayCurrency} = this.props;
var config = {
"type":"serial",
"categoryField":"category",
"fontFamily":"arial",
"categoryAxis":{
"gridPosition":"start",
"title":"Time",
"titleRotation":0
},
"trendLines":[],
"graphs":[
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Hedging"),
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverUpper",
"title": "Hedging",
"newStack": false,
"type": "column",
"valueField": "hedging"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Maximum Additional Hedging"),
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverAdditional",
"title": "Maximum Additional Hedging",
"type": "column",
"newStack": false,
"valueField": "maxAdditionalHedging",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Forecasted Cashflows"),
"fillAlphas": 1,
"balloonColor": "#B0DE09",
"fillColors": "#B0DE09",
"lineColor": "#B0DE09",
"id": "cfGraph",
"title": "Forecasted Cashflows",
"type": "column",
"newStack": true,
"valueField": "exposure"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Policy Minimum"),
"bullet": "triangleUp",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMin",
"valueAxis": "dollarAxis",
"newStack": true,
"title": "Policy Minimum",
"valueField": "minHedge"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonFunction" : formatGraphMoneyBallon("Policy Maximum"),
"bullet": "triangleDown",
"type": "line",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"newStack": true,
"id": "polMax",
"valueAxis": "dollarAxis",
"title": "Policy Maximum",
"valueField": "maxHedge"
}
],
"guides":[],
"valueAxes":[
{"id":"dollarAxis","stackType":"regular","title":"Amount " + displayCurrency}
],
"allLabels":[],
"balloon":{},
"legend":{
"enabled":true,
"useGraphSettings":true,
"spacing": 0,
"valueWidth":15
},
"export":{"enabled":true},
"dataProvider":dataProvider
}
堆叠是通过轴完成的。如果您希望线条不堆叠，请将它们放在一个单独的值轴中，该轴未设置 stackType 并且 link 通过 valueAxis [=34= 到值轴 ID 的图表].您还需要考虑禁用线条的值轴标签、网格并同步 min/max：
graphs:[{
type: "line",
// ...
valueAxis: "dollarAxis-line"
},
// ...
],
valueAxes: [
{
"id": "dollarAxis",
"includeHidden": true,
// ...
},
{
"id": "dollarAxis-line",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0,
}
],
"listeners": [{
"event": "init",
"method": function(e) {
// sync axes
e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.valueAxes[1].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].min);
e.chart.validateData();
}
}]
编辑：
如果您从空图表开始，您可能需要考虑改用 dataUpdated 事件，以便在您更新 dataProvider 后它会重新同步轴。 validateData 方法会触发此事件，因此您需要将此调用包装在检查标志的条件中，以便图表不会无限地调用此方法。
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
下面的演示：
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"fontFamily": "arial",
"categoryAxis": {
"gridPosition": "start",
"title": "Time",
"titleRotation": 0
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverUpper",
"title": "Hedging",
"newStack": false,
"type": "column",
"valueField": "hedging"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"balloonColor": "#000066",
"fillColors": "#000066",
"lineColor": "#000066",
"fillAlphas": 1,
"id": "coverAdditional",
"title": "Maximum Additional Hedging",
"type": "column",
"newStack": false,
"valueField": "maxAdditionalHedging",
"pattern": {
"url": "https://www.amcharts.com/lib/3/patterns/black/pattern5.png",
"width": 4,
"height": 4
}
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"balloonColor": "#B0DE09",
"fillColors": "#B0DE09",
"lineColor": "#B0DE09",
"id": "cfGraph",
"title": "Forecasted Cashflows",
"type": "column",
"newStack": true,
"valueField": "exposure"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleUp",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMin",
"valueAxis": "dollarAxis-line",
"title": "Policy Minimum",
"valueField": "minHedge"
}, {
"balloonText": "[[title]] of [[category]]:[[value]]",
"bullet": "triangleDown",
"type": "line",
"balloonColor": "#014310",
"fillColors": "#014310",
"lineColor": "#014310",
"bulletAlpha": 0.6,
"dashLength": 7,
"id": "polMax",
"valueAxis": "dollarAxis-line",
"title": "Policy Maximum",
"valueField": "maxHedge"
}
],
"guides": [],
"valueAxes": [{
"id": "dollarAxis",
"stackType": "regular",
"includeHidden": true,
"title": "Amount ($)"
},
{
"id": "dollarAxis-line",
"stackType": "none",
"labelsEnabled": false,
"gridAlpha": 0,
"axisAlpha": 0
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true,
"spacing": 0,
"valueWidth": 15
},
"export": {
"enabled": true
},
"dataProvider": [{
"category": "Category 1",
"minHedge": 151218,
"hedging": 111436,
"maxHedge": 236849,
"maxAdditionalHedging": 272065,
"additionalHedging": 233236,
"exposure": 163731
},
{
"category": "Category 2",
"minHedge": 150517,
"hedging": 137299,
"maxHedge": 258805,
"maxAdditionalHedging": 254932,
"additionalHedging": 183495,
"exposure": 111847
},
{
"category": "Category 3",
"minHedge": 158456,
"hedging": 198219,
"maxHedge": 231274,
"maxAdditionalHedging": 259615,
"additionalHedging": 187108,
"exposure": 168738
},
{
"category": "Category 4",
"minHedge": 167931,
"hedging": 173121,
"maxHedge": 263334,
"maxAdditionalHedging": 260449,
"additionalHedging": 229972,
"exposure": 156174
},
{
"category": "Category 5",
"minHedge": 164449,
"hedging": 157823,
"maxHedge": 268980,
"maxAdditionalHedging": 268896,
"additionalHedging": 180031,
"exposure": 100893
},
{
"category": "Category 6",
"minHedge": 166465,
"hedging": 128504,
"maxHedge": 241036,
"maxAdditionalHedging": 269858,
"additionalHedging": 230233,
"exposure": 117158
},
{
"category": "Category 7",
"minHedge": 167117,
"hedging": 110649,
"maxHedge": 229749,
"maxAdditionalHedging": 262671,
"additionalHedging": 201500,
"exposure": 188282
},
{
"category": "Category 8",
"minHedge": 151167,
"hedging": 123489,
"maxHedge": 249919,
"maxAdditionalHedging": 268805,
"additionalHedging": 206302,
"exposure": 120797
},
{
"category": "Category 9",
"minHedge": 154961,
"hedging": 185898,
"maxHedge": 269185,
"maxAdditionalHedging": 271949,
"additionalHedging": 173116,
"exposure": 184312
},
{
"category": "Category 10",
"minHedge": 154385,
"hedging": 141307,
"maxHedge": 234509,
"maxAdditionalHedging": 274889,
"additionalHedging": 216132,
"exposure": 111974
}
],
"listeners": [{
"event": "dataUpdated",
"method": function(e) {
setTimeout(function() {
if (!e.chart.updating) {
e.chart.updating = true;
// sync axes
e.chart.valueAxes[0].maximum = undefined;
e.chart.valueAxes[0].minimum = undefined;
e.chart.valueAxes[1].maximum = undefined;
e.chart.valueAxes[1].minimum = undefined;
e.chart.validateData();
e.chart.valueAxes[1].maximum = e.chart.valueAxes[0].maximum = Math.max(e.chart.valueAxes[0].max, e.chart.valueAxes[1].max);
e.chart.valueAxes[1].minimum = e.chart.valueAxes[0].minimum = Math.min(e.chart.valueAxes[0].min, e.chart.valueAxes[1].mix);
e.chart.validateData();
e.chart.updating = false;
}
}, 100);
}
}]
});
function generateData() {
var data = [];
for (var i = 0; i < 10; ++i) {
data.push({
"category": "Category " + (i + 1),
"minHedge": Math.floor(Math.random() * 100000 + 200000),
"hedging": Math.floor(Math.random() * 150000 + 225000),
"maxHedge": Math.floor(Math.random() * 250000 + 200000),
"maxAdditionalHedging": Math.floor(Math.random() * 100000 + 200000),
"additionalHedging": Math.floor(Math.random() * 150000 + 275000),
"exposure": Math.floor(Math.random() * 225000 + 375000)
});
}
chart.dataProvider = data;
chart.validateData();
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>
<button onclick="generateData()">Generate Data</button>