Question

作为序言，我对highcharts / javascript / jquery一般都是新手，所以如果这是一个简单的问题我很抱歉。

我试图将这个高图绑定到一个变量，同时保持外部的$（div class =＆＃34; chart＆＃34;）元素。这基本上是一个更大的循环的一部分，为每个图表创建一个新的div。这甚至可能吗？

                $('<div class="chart">')
                .appendTo('#container')
                .highcharts({
                    chart: {
                        type: 'line',
                        zoomType: 'xy',
                        animation: false,
                        height: 500
                    },
                    plotOptions: {
                        line: { marker: { enabled: false } },
                        series: {
                            cursor: 'pointer',
                            animation: false,
                            point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
                            turboThreshold: 0,
                        }
                    },
                    xAxis: {
                        title: { text: 'Time' }
                    },
                    yAxis: {
                        title: { text: 'Value' }
                    },
                    tooltip: {
                        crosshairs: true,
                        shared: true,
                        animation: false
                    },
                    title: {
                        text: 'Housekeeping'
                    }
                  });

Answer 1

您可以执行以下操作将图表存储在变量中。

var chartOptions = {
                    chart: {
                        renderTo: 'some unique selector for the container',
                        type: 'line',
                        zoomType: 'xy',
                        animation: false,
                        height: 500
                    },
                    plotOptions: {
                        line: { marker: { enabled: false } },
                        series: {
                            cursor: 'pointer',
                            animation: false,
                            point: { events: { click: function () { conf.zoom.t = this.x.floor(); $scope.updateZoom(); } } },
                            turboThreshold: 0,
                        }
                    },
                    xAxis: {
                        title: { text: 'Time' }
                    },
                    yAxis: {
                        title: { text: 'Value' }
                    },
                    tooltip: {
                        crosshairs: true,
                        shared: true,
                        animation: false
                    },
                    title: {
                        text: 'Housekeeping'
                    }
                  };
    var chart = new Highcharts.Chart(chartOptions);`

这会为变量分配一个新图表并将其渲染到chartOptions.chart.renderTo选择器中指定的元素。

您需要为元素添加一个id（或其他一些方法来选择要渲染的图表的单个元素）。如果这是循环的一部分，您可以使用循环索引作为id，为每个div赋予唯一的id，然后将索引添加到上面提到的renderTo属性。

将Highchart绑定到变量，都在div中？

1 个答案: