Amcharts面积图设置单个线段线系列颜色

问题描述

我已经使用Amcharts绘制了一些面积图,但想分别给每个线段(线系列)上色。

我已经在一个片段中添加了propertyFields进行测试,但是无法显示测试颜色(黑色),下面是图表的完整代码,位于div ID#chartdiv1中。

let chart = am4core.createFromConfig({
    "data": [{
     "category": 0.5,"value1": 8,"value2": 16.4,"value3": 24,"value4": 34,"value5": 50,"value6": 70
 },{
     "category": 1,{
     "category": 1.5,"value6": 70
 
 },{
     "category": 2,{
     "category": 2.5,{
     "category": 3,"value1": 6.5,{
     "category": 3.5,"value1": 5,{
     "category": 4,"value1": 3.9,{
    "category": 4.5,"value1": "x","value6": 70
},{
    "category": 5,{
    "category": 5.5,"value6": 64
},{
    "category": 6,"value2": 14.4,"value3": 21,"value6": 59
},{
    "category": 6.5,"value2": 12.5,"value3": 19,"value6": 54
},{
    "category": 7,"value2": 11,"value3": 16,"value4": 31.6,"value5": 49.7,"value6": 49.7
},{
    "category": 7.5,"value2": 9.5,"value3": 15,"value4": 28.5,"value5": 45.9,"value6": 45.9
},{
    "category": 8,"value2": 8.6,"value3": 14,"value4": 25.8,"value5": 41.5,"value6": 41.5
},{
    "category": 8.5,"value2": 7.6,"value3": 13,"value4": 23.8,"value5": 38,"value6": 38
},{
    "category": 9,"value2": 6.7,"value3": 11,"value4": 21.1,"value5": 35,"value6": 35
},{
    "category": 9.5,"value2": 6.1,"value3": 10,"value4": 19.2,"value5": 32,{
    "category": 10,"value2": 5.5,"value3": 9,"value4": 17.6,"value5": 29.5,"value6": 29.5
},{
    "category": 10.5,"value2": "x","value3": 8,"value4": 16.1,"value5": 27,"value6": 27
},{
    "category": 11,"value3": 7,"value4": 14.7,"value5": 25.5,"value6": 25.5
},{
    "category": 11.5,"value4": 13.6,"value5": 23,"value6": 23
},{
    "category": 12,"value3": 6,"value4": 12.5,"value5": 21.5,"value6": 21.5
},{
    "category": 12.5,"value3": "x","value4": 11.4,"value5": 20,"value6": 20
},{
    "category": 13,"value4": 10.6,"value5": 18.5,"value6": 18.5
},{
    "category": 13.5,"value4": 9.8,"value5": 17,"value6": 17
},{
    "category": 14,"value4": 9.1,"value5": 16,"value6": 16
},{
    "category": 14.5,"value4": "x","value5": 14.5,"value6": 14.5
},{
    "category": 15,"value5": 14,"value6": 14
},{
    "category": 15.5,"value5": 13,"value6": 13
},{
    "category": 16,"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","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","datafields": {
        "valueY": "value2","propertyFields": {
      "fill": "color","stroke": "color"
     },"tooltipText":  "S10\n{valueY} Tonnes @ {categoryX} M"
},"name": "SL20","datafields": {
        "valueY": "value3","tooltipText":  "S20\n{valueY} Tonnes @ {categoryX} M"
},"name": "SL30","datafields": {
        "valueY": "value4","tooltipText":  "S30\n{valueY} Tonnes @ {categoryX} M"
},"name": "SL50-35","datafields": {
        "valueY": "value5","tooltipText":  "S50-35\n{valueY} Tonnes @ {categoryX} M"
},"name": "SL50-55","datafields": {
        "valueY": "value6","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 config的图表设置实际颜色的方法吗?

如何将SL6段颜色设置为黑色进行测试,然后在其他段上重复不同的颜色?

chart的灯光范围图表中显示演示

SL6段位于底部的右侧。

工具提示很好,只想更改图表段的颜色?

谢谢

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)