Question

目的是将边框半径效果应用于图表栏。我发现的只是这个圆边的例子。

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-plot#round-edges-7

但是，应用时会带有玻璃效果。如何使用玻璃效果并保持圆润效果？

Answer 1

FusionCharts不支持柱形图上的圆形边缘，但是，您可以使用圆弧注释形状并创建圆形边缘，但是请注意注释本质上是静态的，这是下面给出的示例图：

 FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'MSColumn2D',
      renderAt: 'chart-container',
      width: '600',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Sales report of Apple products",
          "subcaption": "In Billion $",
          "yaxismaxvalue": "250",
          "decimals": "0",
          "numberprefix": "$",
          "numbersuffix": "B",
          "placevaluesinside": "1",
          "paletteColors": "#FF0000,#00FF00,#FFFF00",
          "divlinealpha": "56",
          "plotfillalpha": "100",
          "plotSpacePercent": "47",
          "crossLineColor": "#cc3300",
          "crossLineAlpha": "100",
          "theme": "zune"
        },
        "annotations": {
          "showbelow": "1",
          "groups": [{
            "id": "transarc",
            "items": [{
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FF0000",
                "alpha": "100",
                "x": "$dataset.0.set.0.x",
                "y": "$dataset.0.set.0.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FF0000",
                "alpha": "100",
                "x": "$dataset.0.set.1.x",
                "y": "$dataset.0.set.1.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FF0000",
                "alpha": "100",
                "x": "$dataset.0.set.2.x",
                "y": "$dataset.0.set.2.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              },
              {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#00FF00",
                "alpha": "100",
                "x": "$dataset.1.set.0.x",
                "y": "$dataset.1.set.0.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#00FF00",
                "alpha": "100",
                "x": "$dataset.1.set.1.x",
                "y": "$dataset.1.set.1.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#00FF00",
                "alpha": "100",
                "x": "$dataset.1.set.2.x",
                "y": "$dataset.1.set.2.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              },
              {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FFFF00",
                "alpha": "100",
                "x": "$dataset.2.set.0.x",
                "y": "$dataset.2.set.0.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FFFF00",
                "alpha": "100",
                "x": "$dataset.2.set.1.x",
                "y": "$dataset.2.set.1.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }, {
                "type": "arc",
                "radius": "16",
                "borderColor": "#FFFFFF",
                "innerRadius": "0",
                "color": "#FFFF00",
                "alpha": "100",
                "x": "$dataset.2.set.2.x",
                "y": "$dataset.2.set.2.STARTY+2",
                "startangle": "0",
                "endangle": "180"
              }
            ]
          }]
        },
        "categories": [{
          "category": [{
              "label": "2012"
            },
            {
              "label": "2013"
            },
            {
              "label": "2014"
            }
          ]
        }],
        "dataset": [{
            "seriesname": "iPod",
            "data": [{
                "value": "42.63"
              },
              {
                "value": "35.16"
              },
              {
                "value": "26.38"
              }
            ]
          },
          {
            "seriesname": "iPhone",
            "data": [{
                "value": "125.04"
              },
              {
                "value": "150.26"
              },
              {
                "value": "169.22"
              }
            ]
          },
          {
            "seriesname": "iPad",
            "data": [{
                "value": "58.31"
              },
              {
                "value": "71.04"
              },
              {
                "value": "67.99"
              }
            ]
          }
        ]
      }
    })
    .render();
});

如何在Fusion Chart上没有玻璃效果的情况下使条形圆滑？

1 个答案: