如何在FusionCharts中绘制多列柱状图

本文关键字：绘制 FusionCharts | 更新日期: 2023-09-27 18:07:30

我正在使用asp.net c#开发一个web应用程序，并使用FusionCharts绘制图形。我需要绘制一个多系列柱状图，我尝试了以下代码，但无效

<div id="chartContainer"></div>
<script type="text/javascript">
        var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
        myChart.setXMLUrl("Data8.xml");
        myChart.render("chartContainer"); 
    </script>
Data8.xml
----------
<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' ><categories>
  <category label='Product A' />
  <category label='Product B' />
  <category label='Product C' />
  <category label='Product D' />
  <category label='Product E' />
  <category label='Product F' />
</categories><dataset seriesName='Current Year'>
  <set value='567500' />
  <set value='815300' />
  <set value='556800' />
  <set value='734500' />
  <set value='676800' />
  <set value='648500' />
</dataset><dataset seriesName='Previous Year'>
  <set value='547300' />
  <set value='584500' />
  <set value='754000' />
  <set value='456300' />
  <set value='754500' />
  <set value='437600' />
</dataset></chart>

如何在FusionCharts中绘制多列柱状图

尝试修改:

 var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");

: 

 var myChart = new FusionCharts("MSColumn3D", "myChartId", "400", "300");

Column3D表示单系列，MSColumn3D表示多系列。

请参考以下链接查看多系列图表https://www.fusioncharts.com/dev/chart-guide/standard-charts/multi-series-charts

请检查数据来源，MS图表数据已更改

 dataSource: {
  "chart": {
    "theme": "fusion",
    "caption": "Comparison of Quarterly Revenue",
    "xAxisname": "Quarter",
    "yAxisName": "Revenues (In USD)",
    "numberPrefix": "$",
    "plotFillAlpha": "80",
    "divLineIsDashed": "1",
    "divLineDashLen": "1",
    "divLineGapLen": "1"
  },
  "categories": [{
    "category": [{
      "label": "Q1"
    }, {
      "label": "Q2"
    }, {
      "label": "Q3"
    }, {
      "label": "Q4"
    }]
  }],
  "dataset": [{
    "seriesname": "Previous Year",
    "data": [{
      "value": "10000"
    }, {
      "value": "11500"
    }, {
      "value": "12500"
    }, {
      "value": "15000"
    }]
  }, {
    "seriesname": "Current Year",
    "data": [{
      "value": "25400"
    }, {
      "value": "29800"
    }, {
      "value": "21800"
    }, {
      "value": "26800"
    }]
  }],
  "trendlines": [{
    "line": [{
      "startvalue": "12250",
      "color": "#5D62B5",
      "displayvalue": "Previous{br}Average",
      "valueOnRight": "1",
      "thickness": "1",
      "showBelow": "1",
      "tooltext": "Previous year quarterly target  : $13.5K"
    }, {
      "startvalue": "25950",
      "color": "#29C3BE",
      "displayvalue": "Current{br}Average",
      "valueOnRight": "1",
      "thickness": "1",
      "showBelow": "1",
      "tooltext": "Current year quarterly target  : $23K"
    }]
  }]
}
演示链接

相关文章：