javascript - 在 highcharts 系列上渲染 HTML 数据属性

Question

有没有办法将系列数据(至少是点数据)渲染为系列对象上的 HTML data 属性？

例如

<g class="highcharts-markers highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(73,71) scale(1 1)" clip-path="none" style="">
   <path fill="#f7a35c" d="M 860 178.07 L 864 186.07 856 186.07 Z" />
   <path fill="#f7a35c" d="M 785 165.065 L 789 173.065 781 173.065 Z" />
   <path fill="#f7a35c" d="M 710 138.3325 L 714 146.3325 706 146.3325 Z" />
   <path fill="#f7a35c" d="M 636 110.155 L 640 118.155 632 118.155 Z" />
   <path fill="#f7a35c" d="M 561 92.815 L 565 100.815 557 100.815 Z" />
   <path fill="#f7a35c" d="M 486 89.92500000000001 L 490 97.92500000000001 482 97.92500000000001 Z" />
   <path fill="#f7a35c" d="M 411 102.93 L 415 110.93 407 110.93 Z" />
   <path fill="#f7a35c" d="M 336 126.77250000000001 L 340 134.7725 332 134.7725 Z" />
   <path fill="#f7a35c" d="M 261 151.3375 L 265 159.3375 257 159.3375 Z" stroke-width="1" />
   <path fill="#f7a35c" d="M 187 171.5675 L 191 179.5675 183 179.5675 Z" stroke-width="1" />
   <path fill="#f7a35c" d="M 112 182.40500000000003 L 116 190.40500000000003 108 190.40500000000003 Z" />
   <path fill="#f7a35c" d="M 37 184.5725 L 41 192.5725 33 192.5725 Z" />
</g>

至:

<path fill="#f7a35c" d="M 860 178.07 L 864 186.07 856 186.07 Z" data-x=34 data-y=48 />

其中 data-x 和 data-y 是点假设值？

Answer 1

您可以在图表加载事件中执行此操作:

  chart: {
        events: {
            load: function(){
                $.each(this.series[0].points, function(i,j){
                  $(j.graphic.element).attr('data-x',this.x); 
                  $(j.graphic.element).attr('data-y',this.y);
                });
            }
        }
    },

示例 here .