0

PlotLinesを使用してHighchartsで作業していました。PlotLineのラベル内に何か（たとえば、削除または更新）を行うためのリンクを追加したいと思います。

    $(function () {
        $(document).ready(function() {

            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'Add Link in PlotLines'
                },
                xAxis: {
                    categories: ['Africa', 'America', 'Asia'],
                },
                yAxis: {
                    plotLines:[{
                        value:450,
                        color: '#ff0000',
                        width:2,
                        zIndex:4,
                        id:'PlotLine1',
                        label:{text:'PlotLine 1 ' + '<a href="#" onClick="delete(PlotLine1);">Delete</a>'}               
                    },
                     {
                        value:200,
                        color: '#000055',
                        width:2,
                        id:'PlotLine2', 
                        zIndex:4,
                        label:{text:'PlotLine 2 ' + '<a href="#" onClick="delete(PlotLine2);">Delete</a>'}                
                    }]                
                },
                series: [{
                    name: 'Year 1800',
                    data: [107, 31, 50]
                },
                        {
                    name: 'Goal',
                            type: 'scatter',
                            marker: {
                        enabled: false
                    },
                    data: [450]
                }]
            });
        });


});

PlotLinesで生成されたソースコードを見ると、次のようになっています。

<tspan onclick="location.href="#"" style="cursor: pointer;" dx="3">
      Delete
</tspan>

ラベルにリンクやボタンを追加する方法があるかどうかわかりません。ソースはhttp://jsfiddle.net/nDjdc/21/にあります

前もって感謝します、

4

1 に答える 1

3

onClickHighcharts は、レンダリング時に属性を持っていないように見えますが、持っているので、hrefこれを行うことができます:

<a href="javascript: deleteMe('PlotLine1');">Delete</a>

私はあなたのものから実用的なフィドルを作成しました。ご覧ください: http://jsfiddle.net/amyamy86/V82pQ/

唯一の注意点は、グローバル オブジェクトにしかアクセスできないことです。そのため、アプリケーションに適切な名前を付けてください :)

参考deleteまでに、予約語であるため、変数の名前としては適切ではありません。https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Reserved_Wordsを参照してください

于 2013-03-08T18:59:24.963 に答える