时间戳

首页 > 解决方案 > Highcharts如何使用列标题作为X轴而不是图例

php - Highcharts如何使用列标题作为X轴而不是图例

问题描述

我使用 highcharts 将我的表格转换为折线图，但现在我面临一个问题，我想将列标题作为 x 轴，而不是在图中使用图例。附上表格的代码和截图。我希望我能找到解决这个问题的方法，因为我还是 highcharts 的新手。

在此处输入图像描述 在此处输入图像描述

   {
  "title": {
    "text": "Performance Review"
  },
  "subtitle": {
    "text": ""
  },
  "yAxis": {
    "title": {
      "text": "Number of Products"
    },
    "labels": {},
    "opposite": false,
    "reversed": false
  },
  "xAxis": {
    "title": {
      "text": "Quarter"
    },
    "labels": {},
    "opposite": false,
    "reversed": false
  },
  "legend": {
    "layout": "vertical",
    "align": "right",
    "verticalAlign": "middle"
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "label": {
        "connectorAllowed": false
      },
      "pointStart": 1,
      "animation": false
    }
  },
  "series": [
    {
      "name": "Quarter 1",
      "turboThreshold": 0,
      "_colorIndex": 0,
      "_symbolIndex": 0
    },
    {
      "name": "Quarter 2",
      "turboThreshold": 0,
      "_colorIndex": 1,
      "_symbolIndex": 1
    },
    {
      "name": "Quarter 3",
      "turboThreshold": 0,
      "_colorIndex": 2,
      "_symbolIndex": 2
    },
    {
      "name": "Quarter 4",
      "turboThreshold": 0,
      "_colorIndex": 3,
      "_symbolIndex": 3
    }
  ],
  "responsive": {
    "rules": [
      {
        "condition": {
          "maxWidth": 500
        },
        "chartOptions": {
          "legend": {
            "layout": "horizontal",
            "align": "center",
            "verticalAlign": "bottom"
          }
        },
        "_id": "highcharts-amzecb7-4"
      }
    ]
  },
  "data": {
    "csv": "\"Company\";\"Quarter 1\";\"Quarter 2\";\"Quarter 3\";\"Quarter 4\"\n\"A\";24916;24916;11744;30000",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  },
  "chart": {
    "inverted": false
  }
}

标签： phphighcharts

解决方案

您需要将 switchRowsAndColumns 属性设置为 true，并将 xAxis 类型设置为类别。您还可以从图表选项中删除系列。

var chart = Highcharts.chart('container', {
  "title": {
    "text": "Performance Review"
  },
  "subtitle": {
    "text": ""
  },
  "yAxis": {
    "title": {
      "text": "Number of Products"
    },
    "labels": {},
    "opposite": false,
    "reversed": false
  },
  "xAxis": {
    type: 'category',
    "title": {
      "text": "Quarter"
    },
    "labels": {},
    "opposite": false,
    "reversed": false
  },
  "legend": {
    "layout": "vertical",
    "align": "right",
    "verticalAlign": "middle"
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "label": {
        "connectorAllowed": false
      },
      "pointStart": 1,
      "animation": false
    }
  },
  "responsive": {
    "rules": [{
      "condition": {
        "maxWidth": 500
      },
      "chartOptions": {
        "legend": {
          "layout": "horizontal",
          "align": "center",
          "verticalAlign": "bottom"
        }
      },
      "_id": "highcharts-amzecb7-4"
    }]
  },
  "data": {
    switchRowsAndColumns: true,
    "csv": "\"Company\";\"Quarter 1\";\"Quarter 2\";\"Quarter 3\";\"Quarter 4\"\n\"A\";24916;24916;11744;30000"
  },
  "chart": {
    "inverted": false
  }
});

现场演示：https ://jsfiddle.net/BlackLabel/8f3pve9w/

API：https ://api.highcharts.com/highcharts/data.switchRowsAndColumns

推荐阅读