javascript HighCharts中的圆环图代码

Posted 2021-05-04

var colors = Highcharts.getOptions().colors;
// Create the chart
Highcharts.chart("container", {
  chart: {
    type: "pie"
  },
  title: {
    text: "Browser market share, January, 2017 to December, 2017"
  },
  subtitle: {
    text: 'Browser market share, January, 2017 to December, 2017'
  },
  yAxis: {
    title: {
      text: "Total percent market share"
    }
  },
  tooltip: {
    valueSuffix: "%"
  },
  series: [
    {
      name: "Browsers",
      data: [
        {
          name: "MSIE",
          y: 10,
          color: colors[0]
        },
        {
          name: "Firefox",
          y: 25,
          color: colors[1]
        },{
          name: "Chrome",
          y: 65,
          color: colors[2],
        }
      ],
      size: "60%",

    },
    {
      name: "Versions",
      data: [
        { name: "MSIE 6.0", y: 0.5, color: colors[0] },
        { name: "MSIE 7.0", y: 1.5, color: colors[0] },
        { name: "MSIE 8.0", y: 2, color: colors[0] },
        { name: "MSIE 9.0", y: 2, color: colors[0] },
        { name: "MSIE 10.0", y: 2, color: colors[0] },
        { name: "MSIE 11.0", y: 2, color: colors[0] },
        { name: "Firefox v31", y: 1, color: colors[1] },
        { name: "Firefox v32", y: 1, color: colors[1] },
        { name: "Firefox v33", y: 2, color: colors[1] },
        { name: "Firefox v35", y: 3, color: colors[1] },
        { name: "Firefox v36", y: 6, color: colors[1] },
        { name: "Firefox v37", y: 4, color: colors[1] },
        { name: "Firefox v38", y: 6, color: colors[1] },
        { name: "Chrome v38.0", y: 6, color: colors[2] },
        { name: "Chrome v39.0", y: 4, color: colors[2] },
        { name: "Chrome v40.0", y: 5, color: colors[2] },
        { name: "Chrome v41.0", y: 5, color: colors[2] },
        { name: "Chrome v42.0", y: 20, color: colors[2] },
        { name: "Chrome v43.0", y: 25, color: colors[2] }
      ],
      size: "80%",
      innerSize: "60%"
    }
  ]
});