如何在底部框上自定义工具提示不属于高图表的图表框

时间:2017-06-25 04:40:39

标签: javascript highcharts

我想在设计的高图上自定义饼图的工具提示,但我不知道该怎么做likes design here

但我只是喜欢my result

My code [here][3]

1 个答案:

答案 0 :(得分:0)

您需要将图表的容器溢出属性设置为'visible'

chart: {
  style: {
    overflow: 'visible'
  }
}

其余的是在工具提示中设置html样式,例如像这样:

    pointFormat: `
      <ul class='tt-list'>
        <li class='tt-item'>Last 4-Weeks (4/17 - 5/13)</li>
        <li class='tt-item'>Orders Filled: 1,183</li>
        <li class='tt-item'>Orders Cancelled: 90</li>
        <li class='tt-item'>Open Orders: 10</li>
      </ul>`
    },

css:

.tt-list {
  list-style-type: none;
  margin: 10px;
  padding: 0;
}

.tt-item:first-child {
  font-weight: bold;
}

.tt-item {
  margin: 0 0 10px 0
}

示例:https://jsfiddle.net/71khj4f7/

tt-oiverflow