jquery 我想在Fusion Chart中使用滚动条形图的向下钻取选项的属性

gpfsuwkq  于 2023-05-28  发布在  jQuery
关注(0)|答案(2)|浏览(139)

融合图

我想在滚动条图表中使用向下钻取选项
我搜索了很多,我发现钻取选项只适用于堆叠条形图。
请告诉我如何才能建立滚动条图表与钻图选项。
先谢了

nnt7mjpx

nnt7mjpx1#

FusionCharts XT的滚动列2D图表支持向下钻取功能。使用深入功能,您可以轻松地生成执行“深入”功能的图表。此外,您还可以将整个图表作为深入查看的热点。
您需要使用set元素的“link”属性来定义列上的链接。您可以定义在同一窗口、新窗口、弹出窗口或框架中打开的链接。
有关详细信息,请参阅:http://docs.fusioncharts.com/charts/contents/index.html?DrillDown/Simple.html

busg9geu

busg9geu2#

滚动条支持向下钻取功能,要了解有关向下钻取功能的更多信息,请参阅link
您可以将目标URL配置为:
在同一窗口中打开
在新窗口中打开
在另一帧中打开
在新的弹出窗口中打开

FusionCharts.ready(function() {
  var topStores = new FusionCharts({
      type: 'scrollbar2d',
      renderAt: 'container',
      width: '600',
      height: '500',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "theme": "fusion",
          "caption": "Top 25 NPM Packages for Node.js Developers",
          //"numVisiblePlot": "6",
          "subCaption": "March 2019 ",
          plottooltext: "$datavalue Downloads",
          "YAxisname": "Number of Downloads",
          "XAxisname": "Packages",
        },
        "categories": [{
          "category": [{
              "label": "Commander.js"
            },
            {
              "label": "Async.js"
            },
            {
              "label": "Request – Simplified HTTP Client"
            },
            {
              "label": "Express"
            },
            {
              "label": "WebPack"
            },
            {
              "label": "Underscore"
            },
            {
              "label": "React"
            },
            {
              "label": "JSDom"
            },
            {
              "label": "Cheerio"
            },
            {
              "label": "Mocha"
            },
            {
              "label": "Marked"
            },
            {
              "label": "LESS"
            },
            {
              "label": "Morgan"
            },
            {
              "label": "Karma"
            },
            {
              "label": "MongoDB Node.JS Driver"
            },
            {
              "label": "Nodemailer"
            },
            {
              "label": "Passport"
            },
            {
              "label": "Browserify"
            },
            {
              "label": "Grunt"
            },
            {
              "label": "JSHint"
            },
            {
              "label": "Angular"
            },
            {
              "label": "Bower"
            },
            {
              "label": "Pug"
            },
            {
              "label": "PM2"
            },
            {
              "label": "Hapi"
            }

          ]
        }],
        "dataset": [{
          "data": [{
              "value": "97294205",
                            "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "95482197",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "60224172",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "33018247",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "31615028",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "28984878",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "25391784",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "23581733",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "12321215",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "10838161",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "7808888",
              "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-https://www.fusioncharts.com/"
            },
            {
              "value": "7127519",
              "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-https://www.fusioncharts.com/"
            },
            {
              "value": "6659395",
              "link": "n-https://www.fusioncharts.com/"
            },
            {
              "value": "5731933"
            },
            {
              "value": "4843888"
            },
            {
              "value": "3264090"
            },
            {
              "value": "2755188"
            },
            {
              "value": "2661761"
            },
            {
              "value": "2371272"
            },
            {
              "value": "2201511"
            },
            {
              "value": "1821149"
            },
            {
              "value": "1683996"
            },
            {
              "value": "1602832"
            },
            {
              "value": "1267422"
            },
            {
              "value": "1042206"
            },

          ]
        }]
      }
    })
    .render();
});

JSFiddle

相关问题