如何在msstackedcolumn2d融合图表中获取滚动条

时间:2017-04-11 15:28:59

标签: html fusioncharts

我一直在为许多应用程序使用融合图表。最近我使用了msstackedcolumn2d图表,我试图为我的图表获得水平滚动条。谁能告诉我如何在msstackedcolumn2d图表中获取滚动条?

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'msstackedcolumn2d',
        renderAt: 'chart-container',
        width: '550',
        height: '350',
        dataFormat: 'json',
        dataSource: {
  "chart": {
    "caption": "Request Report",
    "xaxisname": "Month",
    "yaxisname": "No. of Request",
    "paletteColors": "#0075c2,#45AFF5,#2C8A56,#1aaf5d,#50DE90",
    "bgColor": "#ffffff",
    "borderAlpha": "20",
    "showCanvasBorder": "0",
    "usePlotGradientColor": "0",
    "plotBorderAlpha": "10",
    "legendBorderAlpha": "0",
    "legendShadow": "0",
    "valueFontColor": "#ffffff",
    "showXAxisLine": "1",
    "showPercentValues": "1",
    "showPercentInToolTip": "0",
    "xAxisLineColor": "#999999",
    "divlineColor": "#999999",
    "divLineIsDashed": "1",
    "showAlternateHGridColor": "0",
    "subcaptionFontBold": "0",
    "subcaptionFontSize": "14"
  },
  "categories": [
    {
      "category": [
        {
          "label": "jan"
        },
        {
          "label": "feb"
        },
        {
          "label": "mar"
        },
        {
          "label": "apr"
        },
        {
          "label": "may"
        },
        {
          "label": "june"
        },
        {
          "label": "july"
        },
        {
          "label": "aug"
        },
        {
          "label": "sep"
        },
        {
          "label": "oct"
        },
        {
          "label": "nov"
        },
        {
          "label": "dec"
        }
      ]
    }
  ],
  "dataset": [
    {
      "dataset": [
        {
          "seriesname": "Req_Total",
          "data": [
            {
              "value": "8000"
            },
            {
              "value": "600"
            },
            {
              "value": "100"
            },
            {
              "value": "400"
            },
            {
              "value": "200"
            },
            {
              "value": "200"
            },
            {
              "value": "100"
            },
            {
              "value": "2000"
            },
            {
              "value": "300"
            },
            {
              "value": "700"
            },
            {
              "value": "400"
            },
            {
              "value": "500"
            }
          ]
        },
        {
          "seriesname": "Req_Success",
          "data": [
            {
              "value": "600"
            },
            {
              "value": "500"
            },
            {
              "value": "200"
            },
            {
              "value": "300"
            },
            {
              "value": "100"
            },
            {
              "value": "8000"
            },
            {
              "value": "200"
            },
            {
              "value": "100"
            },
            {
              "value": "2000"
            },
            {
              "value": "200"
            },
            {
              "value": "900"
            },
            {
              "value": "400"
            }
          ]
        },
        {
          "seriesname": "Req_Fail",
          "data": [
            {
              "value": "500"
            },
            {
              "value": "400"
            },
            {
              "value": "8000"
            },
            {
              "value": "2000"
            },
            {
              "value": "200"
            },
            {
              "value": "600"
            },
            {
              "value": "2000"
            },
            {
              "value": "200"
            },
            {
              "value": "100"
            },
            {
              "value": "300"
            },
            {
              "value": "1000"
            },
            {
              "value": "300"
            }
          ]
        }
      ]
    },
    {
      "dataset": [
        {
          "seriesname": "Status",
          "data": [
            {
              "value": "500"
            },
            {
              "value": "400"
            },
            {
              "value": "8000"
            },
            {
              "value": "2000"
            },
            {
              "value": "200"
            },
            {
              "value": "600"
            },
            {
              "value": "10000"
            },
            {
              "value": "5000"
            },
            {
              "value": "100"
            },
            {
              "value": "200"
            },
            {
              "value": "100"
            },
            {
              "value": "300"
            }
          ]
        }
      ]
    },
    {
      "dataset": [
        {
          "seriesname": "Downloaded",
          "data": [
            {
              "value": "600"
            },
            {
              "value": "500"
            },
            {
              "value": "200"
            },
            {
              "value": "300"
            },
            {
              "value": "100"
            },
            {
              "value": "8000"
            },
            {
              "value": "5000"
            },
            {
              "value": "100"
            },
            {
              "value": "2000"
            },
            {
              "value": "100"
            },
            {
              "value": "200"
            },
            {
              "value": "400"
            }
          ]
        }
      ]
    }
  ]
}
    });

    revenueChart.render();
});

我还创建了jsfiddle

1 个答案:

答案 0 :(得分:1)

我担心目前在FusionCharts中是不可能的,因为滚动图是不同的图表集,其中多系列堆叠列目前不存在,但是如果你可以分享用例场景,我可以建议你合适的图表类型