如何使趋势值的颜色与趋势区域不同？

Question

我对融合图表很陌生，并且了解足以制作它们。目前我正在给一个任务来制作一个融合图表并插入一个灰色区域，即趋势区域。这已经完美地解决了，但我必须添加一个显示值，表示目标区域。当前显示值的颜色与该区域相同。我希望我的显示值与趋势区域相比具有不同的颜色，我如何将其实现到我的代码中以实现此目的？

这是我的融合图表的最小版本，显示了我如何设置趋势区域：

FusionCharts.ready(function() {
  var percentChart = new FusionCharts({
    "dataSource": {
      "chart": {
        "trendValueFontSize": "11",
        "trendValueFontBold": "1",
        "trendValueFontItalic": "1",
        "trendValueAlpha": "80"
      },
       "trendlines": [{
          "line": [{
            "isTrendZone": "1",
            "startvalue": "92",
            "endvalue": "108",
            "color": "C2C2C2",
            "valueOnRight": "1",
            "displayvalue": "Target Range"
          }]
        }]
    }
  });
  percentChart.render();
});

Answer 1

找到了一种使趋势值的颜色与趋势区域不同的方法

    FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      id: 'myChart',
      width: '450',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Quarterly Sales Summary",
          "subcaption": "Last year",
          "xaxisname": "Quarter",
          "yaxisname": "Amount (In USD)",
          "numberprefix": "$",
          "theme": "fusion",

          "trendValueFont": "Arial",
          "trendValueFontSize": "12",
          "trendValueFontBold": "1",
          "trendValueFontItalic": "1",
          "trendValueAlpha": "80"
        },
        "data": [{
          "label": "Q1",
          "value": "195000"
        }, {
          "label": "Q2",
          "value": "155000"
        }, {
          "label": "Q3",
          "value": "178000"
        }, {
          "label": "Q4",
          "value": "192000"
        }],
        "trendlines": [{
          "line": [{
            "isTrendZone": "1",
            "startvalue": "92000",
            "endvalue": "10800",
            "color": "C2C2C2",
            "valueOnRight": "1",
            "displayvalue": "Target Range"
          }]
        }]
      }
    })
    .render();
});

使用的 CSS -

 .raphael-group-81-dataset-axis-trend-label {
     text-shadow: 0 0 red;
}

这是一个演示小提琴 - https://jsfiddle.net/3tmao0u7/1/

https://www.fusioncharts.com/dev/chart-guide/chart-configurations/trend-lines-and-zones#customize-the-trend-line-display-value-text

希望能有所帮助。