angularjs Fusioncharts中的可滚动X轴

5f0d552i 于 2023-05-28 发布在 Angular

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

如何使用Fusioncharts创建可滚动X轴？我正在尝试为stacked bar and line graph combination创建一个类似this的滚动条。我可以使用Fusioncharts库提供的任何内置函数添加滚动条吗？有人能帮我解决吗？/*StackOverflow没有接受我的问题，所以我添加了这条评论来增加问题长度 */

const dataSource = {
      "chart": {
        "subcaption": "2016 - 2021",
        "syaxisname": "YoY growth in %",
        "formatnumberscale": "0",
        "numberprefix": "$",
        "numbersuffix": "M",
        "snumbersuffix": "%",
        "showvalues": "0",
        "plottooltext": "Market size for $seriesName in $label is <b>$dataValue</b>",
        "theme": "fusion"
      },
      "categories": [
        {
          "category": [
            {
              "label": "2016"
            },
            {
              "label": "2017"
            },
            {
              "label": "2018"
            },
            {
              "label": "2019"
            },
            {
              "label": "2020"
            }
          ]
        }
      ],
      "dataset": [
        {
          "seriesname": "RPA Software",
          "data": [
            {
              "value": "73"
            },
            {
              "value": "113"
            },
            {
              "value": "153"
            },
            {
              "value": "192"
            },
            {
              "value": "232"
            }
          ]
        },
        {
          "seriesname": "RPA Services",
          "data": [
            {
              "value": "198"
            },
            {
              "value": "330"
            },
            {
              "value": "476"
            },
            {
              "value": "630"
            },
            {
              "value": "790"
            }
          ]
        },
        {
          "seriesname": "YoY Growth",
          "parentyaxis": "S",
          "plottooltext": "$dataValue growth expected in $label",
          "renderas": "line",
          "data": [
            {
              "value": "73"
            },
            {
              "value": "63"
            },
            {
              "value": "42"
            },
            {
              "value": "31"
            },
            {
              "value": "24"
            },
            {
              "value": "20"
            }
          ]
        }
      ]
    };

    FusionCharts.ready(function() {
       var myChart = new FusionCharts({
          type: "stackedcolumn3dlinedy",
          renderAt: "chart-container",
          width: "100%",
          height: "100%",
          dataFormat: "json",
          dataSource
       }).render();
    });

angularjs

来源：https://stackoverflow.com/questions/54826049/scrollable-x-axis-in-fusioncharts

2条答案

按热度按时间

tvokkenx1#

您正在寻找的图表是scrollcombidy 2d
这里是一个演示-http://jsfiddle.net/nqt410Lk/

const dataSource = {
  "chart": {
    "caption": "Analysing Subsidies by Youth Population",
    "subcaption": "By province",
    "yaxisname": "Population Count",
    "syaxisname": "Subsidies % of Income",
    "labeldisplay": "rotate",
    "snumbersuffix": "%",
    "scrollheight": "10",
    "numvisibleplot": "10",
    "drawcrossline": "1",
    "theme": "fusion"
  },
  "categories": [{
    "category": [{
        "label": "Matzikama"
      },
      {
        "label": "Cederberg"
      },
      {
        "label": "Bergrivier"
      },
      {
        "label": "Saldanha Bay"
      },
      {
        "label": "Swartland"
      },
      {
        "label": "Witzenberg"
      },
      {
        "label": "Drakenstein"
      },
      {
        "label": "Stellenbosch"
      },
      {
        "label": "Breede Valley"
      },
      {
        "label": "Langeberg"
      },
      {
        "label": "Swellendam"
      },
      {
        "label": "Theewaterskloof"
      },
      {
        "label": "Overstrand"
      },
      {
        "label": "Cape Agulhas"
      },
      {
        "label": "Kannaland"
      },
      {
        "label": "Hessequa"
      },
      {
        "label": "Mossel Bay"
      },
      {
        "label": "George"
      },
      {
        "label": "Oudtshoorn"
      },
      {
        "label": "Bitou"
      },
      {
        "label": "Knysna"
      },
      {
        "label": "Laingsburg"
      },
      {
        "label": "Prince Albert"
      },
      {
        "label": "Beaufort West"
      }
    ]
  }],
  "dataset": [{
      "seriesname": "Total Population",
      "plottooltext": "Population: $dataValue",
      "data": [{
          "value": "71045"
        },
        {
          "value": "52949"
        },
        {
          "value": "67474"
        },
        {
          "value": "111173"
        },
        {
          "value": "133762"
        },
        {
          "value": "130548"
        },
        {
          "value": "280195"
        },
        {
          "value": "173419"
        },
        {
          "value": "176578"
        },
        {
          "value": "105483"
        },
        {
          "value": "40211"
        },
        {
          "value": "117109"
        },
        {
          "value": "93466"
        },
        {
          "value": "36000"
        },
        {
          "value": "24168"
        },
        {
          "value": "54237"
        },
        {
          "value": "94135"
        },
        {
          "value": "208237"
        },
        {
          "value": "97509"
        },
        {
          "value": "59157"
        },
        {
          "value": "73835"
        },
        {
          "value": "8895"
        },
        {
          "value": "14272"
        },
        {
          "value": "51080"
        }
      ]
    },
    {
      "seriesname": "Youth",
      "renderas": "area",
      "showanchors": "0",
      "plottooltext": "Youth: $dataValue",
      "data": [{
          "value": "24598"
        },
        {
          "value": "18302"
        },
        {
          "value": "22162"
        },
        {
          "value": "40696"
        },
        {
          "value": "47420"
        },
        {
          "value": "49981"
        },
        {
          "value": "97230"
        },
        {
          "value": "73162"
        },
        {
          "value": "60668"
        },
        {
          "value": "34594"
        },
        {
          "value": "12567"
        },
        {
          "value": "39907"
        },
        {
          "value": "30681"
        },
        {
          "value": "11323"
        },
        {
          "value": "7801"
        },
        {
          "value": "15785"
        },
        {
          "value": "31478"
        },
        {
          "value": "72762"
        },
        {
          "value": "32301"
        },
        {
          "value": "21401"
        },
        {
          "value": "27863"
        },
        {
          "value": "3254"
        },
        {
          "value": "5562"
        },
        {
          "value": "19047"
        }
      ]
    },
    {
      "seriesname": "Subsidies received %",
      "parentyaxis": "S",
      "renderas": "line",
      "plottooltext": "$dataValue subsidies received",
      "showvalues": "0",
      "data": [{
          "value": "28.0"
        },
        {
          "value": "35.2"
        },
        {
          "value": "23.9"
        },
        {
          "value": "11.8"
        },
        {
          "value": "18.0"
        },
        {
          "value": "26.9"
        },
        {
          "value": "11.1"
        },
        {
          "value": "11.2"
        },
        {
          "value": "24.0"
        },
        {
          "value": "18.9"
        },
        {
          "value": "35.6"
        },
        {
          "value": "37.9"
        },
        {
          "value": "12.9"
        },
        {
          "value": "27.6"
        },
        {
          "value": "40.5"
        },
        {
          "value": "19.9"
        },
        {
          "value": "15.6"
        },
        {
          "value": "28.2"
        },
        {
          "value": "23.3"
        },
        {
          "value": "26.2"
        },
        {
          "value": "16.9"
        },
        {
          "value": "41.9"
        },
        {
          "value": "62.1"
        },
        {
          "value": "31.2"
        }
      ]
    }
  ]
};

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "scrollcombidy2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource
  }).render();
});

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

jecbmhm32#

您可以使用图表scrollMSStackedColumn2DLineDy
要了解更多信息，请使用

FusionCharts.ready(function() {
  var topStores = new FusionCharts({
      type: 'scrollmsstackedcolumn2dlinedy',
      renderAt: 'container',
      width: '600',
      height: '450',
      dataFormat: 'json',
      dataSource: {
        chart: {
          caption: "Market Share of Korean Automobile Manufacturers in US",
          subcaption: "2005 - 2019",
          pyaxisname: "Units Sold",
          syaxisname: "% of total market share",
          snumbersuffix: "%",
          syaxismaxvalue: "25",
          theme: "fusion",
          showvalues: "0",
          drawcrossline: "1",
          divlinealpha: "20"
        },
        categories: [{
          category: [{
              label: "2005"
            },
            {
              label: "2006"
            },
            {
              label: "2007"
            },
            {
              label: "2008"
            },
            {
              label: "2009"
            },
            {
              label: "2010"
            },
            {
              label: "2011"
            },
            {
              label: "2012"
            },
            {
              label: "2013"
            },
            {
              label: "2014"
            },
            {
              label: "2015"
            },
            {
              label: "2016"
            },
            {
              label: "2017"
            },
            {
              label: "2018"
            },
            {
              label: "2019"
            },

          ]
        }],
        dataset: [{
            dataset: [{
                seriesname: "Honda City",
                data: [{
                    value: "997281"
                  },
                  {
                    value: "1063599"
                  },
                  {
                    value: "1063964"
                  },
                  {
                    value: "1152123"
                  },
                  {
                    value: "1289128"
                  },
                  {
                    value: "1394972"
                  },
                  {
                    value: "1331194"
                  },
                  {
                    value: "1047958"
                  },
                  {
                    value: "974751"
                  },
                  {
                    value: "983243"
                  },
                  {
                    value: "1294208"
                  },
                  {
                    value: "1435345"
                  },
                  {
                    value: "1217785"
                  },
                  {
                    value: "1163621"
                  },
                  {
                    value: "1161561"
                  },
                ]
              },
              {
                seriesname: "Honda Civic",
                data: [{
                    value: "196354"
                  },
                  {
                    value: "259493"
                  },
                  {
                    value: "234755"
                  },
                  {
                    value: "205717"
                  },
                  {
                    value: "205081"
                  },
                  {
                    value: "224978"
                  },
                  {
                    value: "1277225"
                  },
                  {
                    value: "1132872"
                  },
                  {
                    value: "852656"
                  },
                  {
                    value: "1234768"
                  },
                  {
                    value: "205081"
                  },
                  {
                    value: "1027759"
                  },
                  {
                    value: "1141363"
                  },
                  {
                    value: "1277225"
                  },
                  {
                    value: "1285716"
                  }
                ]
              }
            ]
          },
          {
            dataset: [{
                seriesname: "Hyundai Verna",
                data: [{
                    value: "373709"
                  },
                  {
                    value: "391276"
                  },
                  {
                    value: "380002"
                  },
                  {
                    value: "411456"
                  },
                  {
                    value: "476001"
                  },
                  {
                    value: "500537"
                  },
                  {
                    value: "413815"
                  },
                  {
                    value: "496356"
                  },
                  {
                    value: "514865"
                  },
                  {
                    value: "697118"
                  },
                  {
                    value: "567824"
                  },
                  {
                    value: "525457"
                  },
                  {
                    value: "576222"
                  },
                  {
                    value: "484427"
                  },
                  {
                    value: "491488"
                  }
                ]
              },
              {
                seriesname: "Hyundai Sonata",
                data: [{
                    value: "47548"
                  },
                  {
                    value: "73130"
                  },
                  {
                    value: "107659"
                  },
                  {
                    value: "179783"
                  },
                  {
                    value: "202390"
                  },
                  {
                    value: "156107"
                  },
                  {
                    value: "88315"
                  },
                  {
                    value: "103964"
                  },
                  {
                    value: "191982"
                  },
                  {
                    value: "120271"
                  },
                  {
                    value: "125909"
                  },
                  {
                    value: "138739"
                  },
                  {
                    value: "179152"
                  },
                  {
                    value: "131125"
                  },
                  {
                    value: "181549"
                  }
                ]
              }
            ]
          }
        ],
        lineset: [{
          seriesname: "Market Share %",
          plottooltext: "Total market share of Korean cars in $label is <b>$dataValue</b> in US",
          showvalues: "0",
          data: [{
              value: "17.74"
            },
            {
              value: "19.23"
            },
            {
              value: "15.43"
            },
            {
              value: "12.34"
            },
            {
              value: "15.34"
            },
            {
              value: "21.17"
            },
            {
              value: "13.14"
            },
            {
              value: "18.13"
            },
            {
              value: "13.13"
            },
            {
              value: "15.34"
            },
            {
              value: "14.74"
            },
            {
              value: "18.17"
            },
            {
              value: "19.22"
            },
            {
              value: "17.74"
            },
            {
              value: "20.17"
            }
          ]
        }]
      }
    })
    .render();
});

Code Link

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

我来回答

angularjs Fusioncharts中的可滚动X轴

2条答案

相关问题

热门标签

最新问答