【问题标题】:how to remove of y -axis label in chart?如何删除图表中的 y 轴标签?
【发布时间】:2015-09-04 16:32:48
【问题描述】:

你能告诉我删除标签y轴标签吗?我使用融合库制作了一个简单的图表。 http://www.fusioncharts.com/dev/chart-attributes.html?chart=area2d 我看到了一些 y 轴标签 0$,4$,12$..etc 我想删除那个标签。我需要显示这样的图表,如图所示 [![在此处输入图像描述] [1]][1] http://jsfiddle.net/Tu57h/135/

我们可以在右侧显示这个吗?如图所示?

这是我的代码 http://jsfiddle.net/Tu57h/135/

FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        type: 'msarea',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales of Liquor",
                "subCaption": "Previous week vs current week",
                "xAxisName": "Day",
                "numberPrefix": "$",
                "paletteColors": "#0075c2,#1aaf5d",
                "bgColor": "#ffffff",
                "showBorder": "0",
                "showCanvasBorder": "0",
                "plotBorderAlpha": "10",
                "usePlotGradientColor": "0",
                "legendBorderAlpha": "0",
                "legendShadow": "0",
                "plotFillAlpha": "60",
                "showXAxisLine": "1",
                "axisLineAlpha": "25",                
                "showValues": "0",
                "captionFontSize": "14",
                "subcaptionFontSize": "14",
                "subcaptionFontBold": "0",
                "divlineColor": "#999999",                
                "divLineIsDashed": "1",
                "divLineDashLen": "1",
                "divLineGapLen": "1",
                "showAlternateHGridColor": "0",
                "toolTipColor": "#ffffff",
                "toolTipBorderThickness": "0",
                "toolTipBgColor": "#000000",
                "toolTipBgAlpha": "80",
                "toolTipBorderRadius": "2",
                "toolTipPadding": "5",
            },

            "categories": [
                {
                    "category": [
                        {
                            "label": "jan 2015"
                        }, 
                        {
                            "label": "feb 2015"
                        }, 
                        {
                            "label": "mar 2015"
                        }, 
                        {
                            "label": "may 2015"
                        }, 
                        {
                            "label": "jun 2015"
                        }, 
                        {
                            "label": "jul 2015"
                        }, 
                        {
                            "label": "aug 2015"
                        },{
                            "label": "sep 2015"
                        },{
                            "label": "oct 2015"
                        }
                        ,{
                            "label": "nov 2015"
                        },{
                            "label": "dec 2015"
                        }
                    ]
                }
            ],

            "dataset": [
                {
                    "seriesname": "Previous Week",
                    "data": [
                        {
                            "value": "13000"
                        }, 
                        {
                            "value": "14500"
                        }, 
                        {
                            "value": "13500"
                        }, 
                        {
                            "value": "15000"
                        }, 
                        {
                            "value": "15500"
                        }, 
                        {
                            "value": "17650"
                        }, 
                        {
                            "value": "19500"
                        }
                    ]
                }
            ]
        }
    })
    .render();
});

【问题讨论】:

  • 你试过设置showYAxisValues='0'吗??

标签: javascript jquery angularjs charts highcharts


【解决方案1】:

图片右侧显示的是趋势线。您可以在图表设置中使用 showYAxisValues: "0" 删除 y 轴标签,并添加趋势线:

"trendlines": [
  {
    "line": [
      {
          "startvalue": "12000",
          "color": "#1aaf5d",
          "valueOnRight": "1",
          "displayvalue": "$12K"
      }
    ]
  }
]

在这里摆弄http://jsfiddle.net/Tu57h/138/

【讨论】:

    【解决方案2】:

    我不确定 API 是否提供此类功能。但是,要隐藏 y 轴标签,您可以定位由 API 创建的 DOM 部分并将其隐藏。

    setTimeout(function () {
            $('#chart-container .fusioncharts-yaxis-0-gridlabels').eq(0).hide();
        }, 50);
    

    小提琴:http://jsfiddle.net/Tu57h/137/(我无法让它在 jsfiddle 上运行,但在本地机器上运行时效果很好)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-29
      • 1970-01-01
      • 2022-10-20
      • 2019-08-30
      相关资源
      最近更新 更多