Highcharts条形图不显示yaxis值

时间:2016-02-26 12:19:45

标签: highcharts

我在图中显示y轴值时遇到问题。这是我的代码:

var options = {
            chart: {
                renderTo: 'charts_container',
                type: 'column'
            },
            title: {
                text: selecte_company+' '+duration+' '+selecte_branch+' '+selected_menu 
            },
            colors: ['#ABD373', '#FFD285', '#EC5657'],
            legend: {
                itemStyle: {
                    color: '#737979'
                }
            },
            xAxis: {
                categories: xAxis
            },
            yAxis: {
                title: {
                    text: yAxis
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{}]
        };
        $.getJSON(dataLink, function(data) {
        console.log("data");
        console.log(data);
        console.log(data.length);
        console.log(data[0].data.length);
            if (data[0].data.length == 0) {
                $('#charts_container').html('<p id="defalip";>No data found..</p>');
            } else {
                options.series = data;
                var chart = new Highcharts.Chart(options);
            }
        });

我的json是:

[{"name":"value1","data":[[0.91]]},{"name":"valur4 %","data":[[42.63]]}]

enter image description here

我想这样显示我的数据:

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您查看数据[{"name":"value1","data":[[0.91]]},{"name":"valur4 %","data":[[42.63]]}],则name设置为valueXXX - 这将在xAxis上显示。如果您希望图表看起来像降雨示例,最好查看用于渲染它的实际code。您可以看到有多个系列:

series: [{
  name: 'Tokyo',
  data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}, {
  name: 'New York',
  data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

}, {
  name: 'London',
  data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

}, {
  name: 'Berlin',
  data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]

以及xAxis类别的定义:

xAxis: {
  categories: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec'
  ],
  crosshair: true
},

在您的代码中

    xAxis: {
        categories: xAxis
    },

我不知道您在此处定义xAxis列表的位置。

要重现一个类似于演示的图形,您需要生成多个系列并创建一个xAxis.categories数组,以保存每个系列中每个点的xAxis标签。