Javascript Amcharts面积图集单个线段(线系列)颜色
我用Amcharts制作了一些面积图,但我想分别给每个线段(直线系列)上色 我在一个要测试的段中添加了propertyFields,但无法让它显示测试颜色(黑色),下面是图表的完整代码,放在div id#chartdiv1中Javascript Amcharts面积图集单个线段(线系列)颜色,javascript,json,amcharts,Javascript,Json,Amcharts,我用Amcharts制作了一些面积图,但我想分别给每个线段(直线系列)上色 我在一个要测试的段中添加了propertyFields,但无法让它显示测试颜色(黑色),下面是图表的完整代码,放在div id#chartdiv1中 let chart = am4core.createFromConfig({ "data": [{ "category": 0.5, "value1": 8, "va
let chart = am4core.createFromConfig({
"data": [{
"category": 0.5,
"value1": 8,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 1,
"value1": 8,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 1.5,
"value1": 8,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 2,
"value1": 8,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 2.5,
"value1": 8,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 3,
"value1": 6.5,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 3.5,
"value1": 5,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 4,
"value1": 3.9,
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 4.5,
"value1": "x",
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 5,
"value1": "x",
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 70
}, {
"category": 5.5,
"value1": "x",
"value2": 16.4,
"value3": 24,
"value4": 34,
"value5": 50,
"value6": 64
}, {
"category": 6,
"value1": "x",
"value2": 14.4,
"value3": 21,
"value4": 34,
"value5": 50,
"value6": 59
}, {
"category": 6.5,
"value1": "x",
"value2": 12.5,
"value3": 19,
"value4": 34,
"value5": 50,
"value6": 54
}, {
"category": 7,
"value1": "x",
"value2": 11,
"value3": 16,
"value4": 31.6,
"value5": 49.7,
"value6": 49.7
}, {
"category": 7.5,
"value1": "x",
"value2": 9.5,
"value3": 15,
"value4": 28.5,
"value5": 45.9,
"value6": 45.9
}, {
"category": 8,
"value1": "x",
"value2": 8.6,
"value3": 14,
"value4": 25.8,
"value5": 41.5,
"value6": 41.5
}, {
"category": 8.5,
"value1": "x",
"value2": 7.6,
"value3": 13,
"value4": 23.8,
"value5": 38,
"value6": 38
}, {
"category": 9,
"value1": "x",
"value2": 6.7,
"value3": 11,
"value4": 21.1,
"value5": 35,
"value6": 35
}, {
"category": 9.5,
"value1": "x",
"value2": 6.1,
"value3": 10,
"value4": 19.2,
"value5": 32,
"value6": 35
}, {
"category": 10,
"value1": "x",
"value2": 5.5,
"value3": 9,
"value4": 17.6,
"value5": 29.5,
"value6": 29.5
}, {
"category": 10.5,
"value1": "x",
"value2": "x",
"value3": 8,
"value4": 16.1,
"value5": 27,
"value6": 27
}, {
"category": 11,
"value1": "x",
"value2": "x",
"value3": 7,
"value4": 14.7,
"value5": 25.5,
"value6": 25.5
}, {
"category": 11.5,
"value1": "x",
"value2": "x",
"value3": 7,
"value4": 13.6,
"value5": 23,
"value6": 23
}, {
"category": 12,
"value1": "x",
"value2": "x",
"value3": 6,
"value4": 12.5,
"value5": 21.5,
"value6": 21.5
}, {
"category": 12.5,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": 11.4,
"value5": 20,
"value6": 20
},{
"category": 13,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": 10.6,
"value5": 18.5,
"value6": 18.5
}, {
"category": 13.5,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": 9.8,
"value5": 17,
"value6": 17
}, {
"category": 14,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": 9.1,
"value5": 16,
"value6": 16
},{
"category": 14.5,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": "x",
"value5": 14.5,
"value6": 14.5
},{
"category": 15,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": "x",
"value5": 14,
"value6": 14
}, {
"category": 15.5,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": "x",
"value5": 13,
"value6": 13
}, {
"category": 16,
"value1": "x",
"value2": "x",
"value3": "x",
"value4": "x",
"value5": 12,
"value6": 12
}],
"xAxes": [{
"type": "CategoryAxis",
"id": "id-1",
"title": {
"type": "Label",
"id": "span",
"text": "Span in Metres"
},
"dataFields": {
"category": "category"
},
"startLocation": 0.5,
"endLocation": 0.5,
"renderer": {
"grid": {
"template": {
"type": "Grid",
"location": 0.5
}
},
"minGridDistance": 20
}
}],
"yAxes": [{
"type": "ValueAxis",
"id": "id-2",
"title": {
"type": "Label",
"id": "swl",
"text": "S.W.L/Tonnes @ 30° STV",
"propertyFields": {}
},
"min": "0",
"max": "10",
"renderer": {
"maxLabelPosition": 0.98
}
}], "series": [{
"type": "LineSeries",
"name": "SL6",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value1",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "SL6\n{valueY} Tonnes @ {categoryX} M"
}, {
"type": "LineSeries",
"name": "SL10",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value2",
"categoryX": "category"
},
"propertyFields": {
"fill": "color",
"stroke": "color"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "S10\n{valueY} Tonnes @ {categoryX} M"
}, {
"type": "LineSeries",
"name": "SL20",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value3",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "S20\n{valueY} Tonnes @ {categoryX} M"
}, {
"type": "LineSeries",
"name": "SL30",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value4",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "S30\n{valueY} Tonnes @ {categoryX} M"
}, {
"type": "LineSeries",
"name": "SL50-35",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value5",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "S50-35\n{valueY} Tonnes @ {categoryX} M"
}, {
"type": "LineSeries",
"name": "SL50-55",
"xAxis": "id-1",
"yAxis": "id-2",
"baseAxis": "id-1",
"dataFields": {
"valueY": "value6",
"categoryX": "category"
},
"fillOpacity": 0.5,
"strokeWidth": 2,
"sequencedInterpolation": true,
"sequencedInterpolationDelay": 100,
"tooltipText": "S50-55\n{valueY} Tonnes @ {categoryX} M"
}],
"legend": {
"type": "Legend",
"position": "top"
},
"cursor": {
"type": "XYCursor",
"tooltipPosition": "fixed"
},
"colors": {
"type": "ColorSet",
}
}, "#chartdiv1", am4charts.XYChart);
已删除基色,因此可以单独设置所有图表(段)bg颜色
但是在文档中找不到如何使用基于json配置的图表设置实际颜色
我们如何将SL6段颜色设置为黑色来测试它,然后在其他段上用不同的颜色重复
在灯光范围图表中演示
其中SL6段位于底部
工具提示很好,只是想更改图表段的颜色
谢谢