【问题标题】:How to get scrollbar in msstackedcolumn2d fusion chart如何在 msstackedcolumn2d 融合图中获取滚动条
【发布时间】:2017-04-13 15:37:45
【问题描述】:

我一直在为许多应用程序使用融合图。最近我使用了 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

【问题讨论】:

    标签: html fusioncharts


    【解决方案1】:

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

    【讨论】:

    • 我的用例是从一月到十二月的月份标签。和系列有 req_total,req_success,req_failure,status,downloaded。我正在尝试找到一个可以组合 req_total、req_success、req_failure 的图表
    • 那么为什么需要滚动条呢?我在这里指的是你的小提琴-jsfiddle.net/sghxojj9/2
    • 里面的数字看不清楚。此外,我也想增加条形宽度
    猜你喜欢
    • 1970-01-01
    • 2015-05-30
    • 1970-01-01
    • 1970-01-01
    • 2016-06-07
    • 1970-01-01
    • 1970-01-01
    • 2012-11-05
    • 2012-09-12
    相关资源
    最近更新 更多