Question

我正在使用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
  }
}

Answer 1

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

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

Highcharts如何将列标题用作X轴而不是图例

1 个答案: