Прокручиваемая ось X в Fusioncharts

Как создать прокручиваемую ось X с помощью Fusioncharts? Я пытаюсь создать полосу прокрутки, например это для комбинация гистограммы и линейного графика. Можно ли добавить полосу прокрутки с помощью встроенных функций библиотеки 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();
    });

javascript jquery angularjs fusioncharts graph
person Sampath    schedule 22.02.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Диаграмма, которую вы ищете, называется scrollcombidy2d.

Вот демо - 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();
});
person Zapdos13    schedule 22.02.2019
comment
Спасибо за ответ, но мне нужна полоса прокрутки по оси X для этого сложенного столбца и линейного комбинированного графика. fusioncharts.com/ диаграммы/комбинированные диаграммы-dual-y/ - person Sampath; 22.02.2019