fusioncharts 3.4 抛弃swf的方式,采用纯js的html5 进行图表绘制后出现的一些问题。

1. 适用msline 绘制多线图表的时候,原来的json对象无法绘制线型的问题。


主要是 用于 3.4 之前的版本 json 对象中的 categories

可以是一个对象。而在3.4 版本中必须是一个 数组

{
   "chart": {
      "caption": "Number of visitors last week",
      "subCaption": "Bakersfield Central vs Los Angeles Topanga",
      "xAxisName": "Day",
      "showborder": "0",
      "yAxisName": "No. of visitors",
      "paletteColors": "#6baa01,#008ee4",
      "bgAlpha": "0",
      "borderAlpha": "20",
      "canvasBorderAlpha": "0",
      "usePlotGradientColor": "0",
      "plotBorderAlpha": "10",
      "legendBorderAlpha": "0",
      "legendShadow": "0",
      "captionpadding": "20",
      "showXAxisLines": "1",
      "axisLineAlpha": "25",
      "divLineAlpha": "10",
      "showValues": "0",
      "showAlternateHGridColor": "0",
      "animation": "0",
      "showYAxisValues": "0",
      "yAxisNamePadding": "100",
      "showtooltip": "0"
   },
   "categories": [
      {
         "category": [
            {
               "label": "Mon"
            },
            {
               "label": "Tue"
            },
            {
               "label": "Wed"
            },
            {
               "vline": "true",
               "lineposition": "0",
               "color": "#6baa01",
               "labelHAlign": "right",
               "labelPosition": "0",
               "label": "National holiday"
            },
            {
               "label": "Thu"
            },
            {
               "label": "Fri"
            },
            {
               "label": "Sat"
            },
            {
               "label": "Sun"
            }
         ]
      }
   ],
   "annotations": {
      "origw": "600",
      "origh": "450",
      "autoscale": "1",
      "groups": [
         {
            "id": "ds1tips",
            "items": [
               {
                  "id": "indicator-line",
                  "type": "line",
                  "dashed": "1"
               },
               {
                  "id": "tip1_1",
                  "type": "rectangle",
                  "fillcolor": "#6baa01",
                  "x": "$dataset.0.set.0.x + 5",
                  "y": "$dataset.0.set.0.y - 30",
                  "tox": "$dataset.0.set.0.x + 80",
                  "toy": "$dataset.0.set.0.y - 10"
               }
            ]
         },
         {
            "id": "yaxisline",
            "items": [
               {
                  "id": "line",
                  "type": "line",
                  "color": "#f8bd19",
                  "x": "$canvasstartx - 5",
                  "y": "$canvasstarty",
                  "tox": "$canvasstartx - 5",
                  "toy": "$canvasendy",
                  "thickness": "3"
               },
               {
                  "id": "none-label-bg",
                  "type": "rectangle",
                  "fillcolor": "#f8bd19",
                  "x": "$canvasstartx - 60",
                  "tox": "$canvasstartx - 15",
                  "y": "$canvasendy - 20",
                  "toy": "$canvasendy",
                  "radius": "3"
               },
               {
                  "id": "none-dot",
                  "type": "circle",
                  "radius": "5",
                  "x": "$canvasstartx - 5",
                  "y": "$canvasendy - 10",
                  "color": "#f8bd19"
               },
               {
                  "id": "none-label",
                  "type": "text",
                  "fillcolor": "#ffffff",
                  "text": "None",
                  "x": "$canvasstartx - 37",
                  "y": "$canvasendy - 12",
                  "fontsize": "12",
                  "bold": "1"
               },
               {
                  "id": "few-label-bg",
                  "type": "rectangle",
                  "fillcolor": "#f8bd19",
                  "x": "$canvasstartx - 55",
                  "tox": "$canvasstartx - 15",
                  "y": "$canvasendy - 100",
                  "toy": "$canvasendy - 80",
                  "radius": "3"
               },
               {
                  "id": "few-dot",
                  "type": "circle",
                  "radius": "5",
                  "x": "$canvasstartx - 5",
                  "y": "$canvasendy - 90",
                  "color": "#f8bd19"
               },
               {
                  "id": "few-label",
                  "type": "text",
                  "fillcolor": "#ffffff",
                  "text": "Few",
                  "x": "$canvasstartx - 35",
                  "y": "$canvasendy - 92",
                  "fontsize": "12",
                  "bold": "1"
               },
               {
                  "id": "moderate-label-bg",
                  "type": "rectangle",
                  "fillcolor": "#f8bd19",
                  "x": "$canvasstartx - 85",
                  "tox": "$canvasstartx - 15",
                  "y": "$canvasendy - 180",
                  "toy": "$canvasendy - 160",
                  "radius": "3"
               },
               {
                  "id": "moderate-dot",
                  "type": "circle",
                  "radius": "5",
                  "x": "$canvasstartx - 5",
                  "y": "$canvasendy - 170",
                  "color": "#f8bd19"
               },
               {
                  "id": "moderate-label",
                  "type": "text",
                  "fillcolor": "#ffffff",
                  "text": "Moderate",
                  "x": "$canvasstartx - 50",
                  "y": "$canvasendy - 172",
                  "fontsize": "12",
                  "bold": "1"
               },
               {
                  "id": "maximum-label-bg",
                  "type": "rectangle",
                  "fillcolor": "#f8bd19",
                  "x": "$canvasstartx - 88",
                  "tox": "$canvasstartx - 15",
                  "y": "$canvasendy - 260",
                  "toy": "$canvasendy - 240",
                  "radius": "3"
               },
               {
                  "id": "maximum-dot",
                  "type": "circle",
                  "radius": "5",
                  "x": "$canvasstartx - 5",
                  "y": "$canvasendy - 252",
                  "color": "#f8bd19"
               },
               {
                  "id": "maximum-label",
                  "type": "text",
                  "fillcolor": "#ffffff",
                  "text": "Maximum",
                  "x": "$canvasstartx - 52",
                  "y": "$canvasendy - 252",
                  "fontsize": "12",
                  "bold": "1"
               }
            ]
         },
         {
            "id": "dyn-label-grp",
            "items": [
               {
                  "id": "dyn-label-bg",
                  "type": "rectangle",
                  "radius": "3"
               },
               {
                  "id": "dyn-label",
                  "type": "text",
                  "fillcolor": "#ffffff",
                  "fontsize": "12",
                  "bold": "1"
               },
               {
                  "id": "dyn-detail-label",
                  "type": "text",
                  "align": "right",
                  "x": "$canvasendx",
                  "bgcolor": "#ffffff"
               }
            ]
         }
      ]
   },
   "dataset": [
      {
         "seriesname": "Bakersfield Central",
         "data": [
            {
               "value": "15123"
            },
            {
               "value": "14233"
            },
            {
               "value": "25507"
            },
            {
               "value": "9110"
            },
            {
               "value": "15529"
            },
            {
               "value": "20803"
            },
            {
               "value": "19202"
            }
         ]
      },
      {
         "seriesname": "Los Angeles Topanga",
         "data": [
            {
               "value": "13400"
            },
            {
               "value": "12800"
            },
            {
               "value": "22800"
            },
            {
               "value": "12400"
            },
            {
               "value": "15800"
            },
            {
               "value": "19800"
            },
            {
               "value": "21800"
            }
         ]
      }
   ]
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值