FusionChart 中的图表渲染上未显示 X 轴标签

问题描述 投票:0回答:2

图表渲染时默认不显示 X 轴标签。单击图例(例如 T2)后,它会显示。详情请看下面的图片。

图1:标签未显示。 图2:点击图例(T2)时,出现标签

有人能告诉我这里出了什么问题吗?我在图表调试器的控制台中没有看到任何错误

php fusioncharts
2个回答
0
投票

尝试复制该问题,在此示例中旋转后 X 轴标签正确呈现:http://jsfiddle.net/xykvfru8/

"labelDisplay": "rotate"

请您在上述示例中复制您的问题并分享吗?


0
投票

在此模式下,您可以将长 x 轴标签换行为多行。如果图表中没有足够的空间,此模式将自动修剪标签,在末尾添加省略号,并显示此类标签的工具提示。要换行数据标签,请将 labelDisplay 属性设置为换行。参考以下代码:

{
   "chart": {
      "rotateLabels": "0",
      "labelDisplay": "wrap"
   }
}

这是现场演示代码 -

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'mscolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Sales Trends",
        "subcaption": "2016 - 2017",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "numberprefix": "$",
        "labelDisplay": "wrap"
      },
      "categories": [{
        "category": [{
            "label": "12-Jan-2016"
          },
          {
            "label": "02-Feb-2016"
          },
          {
            "label": "15-Mar-2016"
          },
          {
            "label": "10-Apr-2016"
          },
          {
            "label": "22-May-2016"
          },
          {
            "label": "11-Jun-2016"
          },
          {
            "label": "21-Jul-2016"
          },
          {
            "label": "02-Aug-2016"
          },
          {
            "label": "12-Sep-2016"
          },
          {
            "label": "18-Oct-2016"
          },
          {
            "label": "14-Nov-2016"
          },
          {
            "label": "28-Dec-2016"
          },
          {
            "label": "21-Jan-2017"
          },
          {
            "label": "11-Feb-2017"
          },
          {
            "label": "06-Mar-2017"
          },
          {
            "label": "14-Apr-2017"
          },
          {
            "label": "11-May-2017"
          },
          {
            "label": "28-Jun-2017"
          },
          {
            "label": "30-Jul-2017"
          },
          {
            "label": "19-Aug-2017"
          },
          {
            "label": "23-Sep-2017"
          },
          {
            "label": "22-Oct-2017"
          },
          {
            "label": "19-Nov-2017"
          },
          {
            "label": "22-Dec-2017"
          }
        ]
      }],
      "dataset": [{
        "data": [{
            "value": "27400"
          },
          {
            "value": "29800"
          },
          {
            "value": "25800"
          },
          {
            "value": "26800"
          },
          {
            "value": "29600"
          },
          {
            "value": "32600"
          },
          {
            "value": "31800"
          },
          {
            "value": "36700"
          },
          {
            "value": "29700"
          },
          {
            "value": "31900"
          },
          {
            "value": "34800"
          },
          {
            "value": "24800"
          },
          {
            "value": "26300"
          },
          {
            "value": "31800"
          },
          {
            "value": "30900"
          },
          {
            "value": "33000"
          },
          {
            "value": "36200"
          },
          {
            "value": "32100"
          },
          {
            "value": "37500"
          },
          {
            "value": "38500"
          },
          {
            "value": "35400"
          },
          {
            "value": "38200"
          },
          {
            "value": "33300"
          },
          {
            "value": "38300"
          }
        ]
      }]
    }
  });

  revenueChart.render();
});

这是演示小提琴 - https://jsfiddle.net/h9s4p7cu/2/

请参阅文档 - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-labels

© www.soinside.com 2019 - 2024. All rights reserved.