Question

STACKBLITZ

https://stackblitz.com/edit/angular-fwuwet

由于某些原因，第一次启动图表时，堆栈闪电无法加载，因此只需对app.component.ts文件进行更改即可正确加载

这是我的图表代码

this.AmCharts.makeChart('chartForecast', {
    'type': 'serial',
    'categoryField': 'category',
    'sequencedAnimation': false,
    'columnWidth': 0.3,
    'marginLeft': 19,
    'zoomOutButtonTabIndex': 1,
    'startDuration': 1,
    'accessible': false,
    'addClassNames': true,
    'autoResize': false,
    'categoryAxis': {
      'autoRotateCount': 0,
      'gridPosition': 'start',
      'autoGridCount': false,
      'axisAlpha': 0,
      'labelsEnabled': false,
      'showFirstLabel': false,
      'showLastLabel': false,
      'titleBold': false
    },
    'trendLines': [],
    'graphs': [
      {
        'balloonText': '[[title]] of [[category]]:[[value]]',
        'fillAlphas': 1,
        'id': 'AmGraph-1',
        'title': 'graph 1',
        'type': 'column',
        'lineAlpha': 0,
        'fillColors': ['#489f58', '#8ac249'],
        'valueField': 'column-1',
        'fixedColumnWidth': 20,
      },
      {
        'balloonText': '[[title]] of [[category]]:[[value]]',
        'fillAlphas': 1,
        'id': 'AmGraph-2',
        'title': 'graph 2',
        'type': 'column',
        'valueField': 'column-2',
        'fillColors': ['#f89d28', '#de602e'],
        'lineAlpha': 0,
        'lineThickness': 0,
        'fixedColumnWidth': 20,
      },
      {
        'bullet': 'round',
        'columnWidth': 0,
        'dashLength': 3,
        'fontSize': 1,
        'lineColor': '#FFFFFF',
        'id': 'AmGraph-3',
        'title': 'graph 3',
        'topRadius': 0,
        'valueField': 'column-1',
        'visibleInLegend': false
      },
      {
        'clustered': false,
        'columnWidth': 0,
        'fillAlphas': 1,
        'fillColors': ['#f89d28', '#de602e'],
        'fixedColumnWidth': 7,
        'id': 'AmGraph-4',
        'lineAlpha': 0,
        'lineThickness': 0,
        'showBalloon': false,
        'showOnAxis': true,
        'stackable': false,
        'tabIndex': 2,
        'title': 'graph 4',
        'topRadius': 0,
        'type': 'column',
        'valueField': 'column-4',
        'visibleInLegend': false
      },
      {
        'columnWidth': 0,
        'dashLength': 3,
        'fontSize': 1,
        'stackable': false,
        'lineColor': '#FFFFFF',
        'id': 'AmGraph-5',
        'title': 'graph 5',
        'topRadius': 0,
        'valueField': 'column-4',
        'visibleInLegend': false
      },
    ],
    'guides': [],
    'valueAxes': [
      {
        'id': 'ValueAxis-1',
        'stackType': 'regular',
        'autoGridCount': false,
        'autoRotateCount': 0,
        'axisAlpha': 0,
        'labelsEnabled': false,
        'showFirstLabel': false,
        'showLastLabel': false,
      }
    ],
    'allLabels': [],
    'balloon': {},
    'titles': [
      {
        'id': 'Title-1',
        'alpha': 0,
        'size': 15,
        'text': 'Chart Title'
      }
    ],
    'dataProvider': [
      {
        'category': 'category 1',
        'column-1': '6.5',
        'column-2': '-5.5',
        'column-3': '6.5',
        'column-4': '-2.0',
      },
      {
        'category': 'category 2',
        'column-1': '4.6',
        'column-2': '-6.6',
        'column-3': '4.6',
        'column-4': '-2.0',
      },
      {
        'category': 'category 3',
        'column-1': '7.8',
        'column-2': '-4.9',
        'column-3': '7.8',
        'column-4': '-2.0',
      }
    ]
});

现在我有几列，其中的三列使用属性fillColors填充了渐变色，现在它可以完美地在台式机上使用，但在移动设备上没有渐变色，只能用黑色填充。。我找不到任何官方文档如何解决此问题，甚至其他任何类似问题的参考。

DESKTOP

移动

================================编辑=========== ========================

根据进一步的研究，似乎要在移动设备上使用渐变，您需要像这样将其包装在<defs></defs>标签中。

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)"
      x="10" y="10" width="100" height="100"/>
</svg>

*参加了有关线性渐变https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient的mozilla文档

但是由于这是AmCharts自动生成的代码，我该如何解决？

任何帮助将不胜感激

Answer 1

您可以在传递给 makeChart 方法的配置对象上定义 defs 属性。这是一个对我有用的示例：

config.defs = {
  "linearGradient": [
    {
    "id": "gradient",
    "x1": "0",
    "x2": "0",
    "y1": "0",
    "y2": "1",
    "stop": [
      {
        "offset": "0%",
        "style": "stop-color: #fff; stop-opacity: 0.7"
      },
      {
        "offset": "50%",
        "style": "stop-color: #fff; stop-opacity: 0.5"
      },
      {
        "offset": "100%",
        "style": "stop-color: #fff; stop-opacity: 0.01"
      }
    ]
  }

AmCharts列填充在iOS Safari和Chrome上全黑

1 个答案: