javascript 如何在FusionCharts中绘制多系列柱形图

ruyhziif 于 2023-05-21 发布在 Java

关注(0)|答案(2)|浏览(137)

我正在使用www.example.com c#开发一个Web应用程序asp.net，并使用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>

请帮我做这件事…

JavaScript

来源：https://stackoverflow.com/questions/15836010/how-to-draw-multi-series-column-chart-in-fusioncharts

2条答案

按热度按时间

blmhpbnm1#

尝试修改：

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

有：

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

Column3D用于单系列，MSColumn3D用于多系列。

赞(0）回复(0）举报 2023-05-21

slwdgvem2#

请参考以下链接获取多系列图表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"
    }]
  }]
}

Demo link

赞(0）回复(0）举报 2023-05-21

我来回答

javascript 如何在FusionCharts中绘制多系列柱形图

2条答案

相关问题

热门标签

最新问答