复选框和系列标题的切换位置

Question

我正在尝试替换复选框和字符串标签（unit_case <-> 复选框）在 Highcharts 上的位置，但我在每一步都失败了。我尝试 google 它，但他们中的许多人都建议使用一些包装功能。有没有人遇到过这个问题，他设法解决了吗？非常感谢！

$(function() {
  var chart = new Highcharts.Chart({
  "meta": {
    "drilldownEnabled": false
  },
  "chart": {
  renderTo:"container",
    "additionalData": {
      "dateTime": false,
      "datetype": "string",
      "cliccable": true,
      "drillable": false,
      "drillableChart": false,
      "isCockpit": true,
      "categoryColumn": "brand_name",
      "categoryGroupBy": "",
      "categoryGroupByNamens": "",
      "categoryName": "brand_name",
      "categoryOrderColumn": "",
      "categoryOrderType": "",
      "categoryStacked": "",
      "categoryStackedType": ""
    },
    "zoomType": "xy",
    "panning": true,
    "type": "column",
    "options3d": {
      "enabled": false,
      "alpha": 25,
      "beta": 15,
      "depth": 50,
      "viewDistance": 25
    },
    "backgroundColor": "#FFFFFF",
    "heightDimType": "pixels",
    "widthDimType": "pixels",
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "borderColor": "#FFFFFF",
    "style": {
      "backgroundColor": "#FFFFFF",
      "fontFamily": "",
      "fontWeight": "",
      "fontSize": ""
    },
    "events": {}
  },
  "colors": [
    "#7cb5ec",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#e4d354",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ],
  "title": {
    "text": "",
    "style": {
      "align": "",
      "color": "",
      "fontFamily": "",
      "fontSize": "",
      "fontWeight": ""
    }
  },
  "legend": {
    "enabled": true,
    "align": "center",
    "verticalAlign": "top",
    "layout": "horizontal",
    "y": 0,
    "shadow": true,
    "itemStyle": {
      "color": "",
      "fontSize": "",
      "fontWeight": ""
    },
    "title": {
      "text": "",
      "style": {
        "fontWeight": ""
      }
    }
  },
  "xAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "type": "category",
      "id": 0,
      "title": {
        "customTitle": false,
        "text": "brand_name",
        "style": {}
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      }
    }
  ],
  "yAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "min": 0,
      "title": {
        "text": "",
        "customTitle": false,
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": ""
        }
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      },
      "gridLineDashStyle": "$convertedTypeline",
      "minorGridLineDashStyle": "$convertedMinorTpeline"
    }
  ],
  "series": [
    {
      "name": "units_per_case",
      "dataLabels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [
        {
          "drilldown": false,
          "y": 26,
          "name": "ADJ",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 37,
          "name": "Akron",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 207,
          "name": "American",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 32,
          "name": "Amigo",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 22,
          "name": "Applause",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 342,
          "name": "Bird Call",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 890,
          "name": "Tri-State",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 134,
          "name": "Urban",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 191,
          "name": "Walrus",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 215,
          "name": "Washington",
          "datetype": "string"
        }
      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    },
    {
      "name": "cases_per_pallet",
      "dataLabels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [
        {
          "drilldown": false,
          "y": 8,
          "name": "ADJ",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 23,
          "name": "Akron",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 142,
          "name": "American",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 12,
          "name": "Amigo",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 13,
          "name": "Applause",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 93,
          "name": "Atomic",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 285,
          "name": "BBB Best",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 33,
          "name": "Best",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 343,
          "name": "Best Choice",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 210,
          "name": "Better",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 18,
          "name": "Big City",
          "datetype": "string"
        },
   
      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    }
  ],
  "tooltip": {
    "followTouchMove": false,
    "followPointer": true,
    "useHTML": true,
    "backgroundColor": null,
    "style": {
      "padding": 0
    }
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "fontFamily": "",
      "fontSize": "",
      "color": ""
    },
    "position": {
      "align": "center",
      "verticalAlign": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "line": {
      "marker": {
        "symbol": "circle",
        "lineWidth": 2
      }
    },
    "series": {
      "events": {},
      "showCheckbox": true,
      "cursor": "pointer",
      "point": {
        "events": {}
      },
      "dataLabels": {
        "allowOverlap": true
      },
      "turboThreshold": 2000
    }
  }
});
});

http://jsfiddle.net/JeLrb/504/

Answer 1

我设法使用 "legend" 对象（ itemDistance、symbolPadding ）上的属性找到解决方案，否则复选框将超过字符串值这是解决方案。 jsfiddle.net/JeLrb/510 最可悲的是，这实际上是一个解决方案，没有更好的方法，已由 Highcharts 支持确认。讽刺不是吗？

复选框和系列标题的切换位置

Switching position of checkbox and title of serie

javascript

charts

highcharts

jsfiddle