如何在图表中删除y轴标签?

时间:2015-09-04 16:32:48

标签: javascript jquery angularjs charts highcharts

请你告诉我删除标签y轴标签。我使用融合库制作一个简单的图表。 http://www.fusioncharts.com/dev/chart-attributes.html?chart=area2d 我看到一些y轴标签 0 $,4 $,12 $ ..等等我想删除那个标签。我需要显示如图所示的图表[![在此处输入图片说明] [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();
});

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:-1)

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

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

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