Question

我开发了一个显示多个图表的网页。它基于下拉菜单选择。例如，如果我选择行，那么折线图应该出现在容器中，如果我选择双轴图表，它应该出现在同一个容器中。但在创建同步图表时。我面临一个问题。似乎正在创建图表，但它们不会被附加到容器中。请帮帮我。

我的代码如下：

SynchronizedChart.js：

/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
        Highcharts.each(Highcharts.charts, function (chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) { // It is null while updating
                    chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
                }
            }
        });
    }
}

function drawSyncChart(Takennumber) {
     /**
     * In order to synchronize tooltips and crosshairs, override the
     * built-in events with handlers defined on the parent element.
     */
    /*$('#displayPanel').bind('mousemove touchmove touchstart', function (e) {
        var chart,
            point,
            i,
            event;

        for (i = 0; i < Highcharts.charts.length; i = i + 1) {
            chart = Highcharts.charts[i];
            event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
            point = chart.series[0].searchPoint(event, true); // Get the hovered point

            if (point) {
                point.highlight(e);
            }
        }
    });*/

    /**
    * Override the reset function, we don't need to hide the tooltips and crosshairs.
    */
    Highcharts.Pointer.prototype.reset = function () {
        return undefined;
    };

    /**
     * Highlight a point by showing tooltip, setting hover state and draw crosshair
     */
    Highcharts.Point.prototype.highlight = function (event) {
        this.onMouseOver(); // Show the hover marker
        this.series.chart.tooltip.refresh(this); // Show the tooltip
        this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
    };

    var output = { "xData": [], "datasets": [] };
    //**********************************************
    // DATA MANIPULATION AS PER HIGHCHART CONVENTION
    //**********************************************
    //console.log(JSON.stringify(output));

    $.each(output.datasets, function (i, dataset) {

        // Add X values
        dataset.data = Highcharts.map(dataset.data, function (val, j) {
            return [output.xData[j], val];
        });

        $('<div class="tmp">')
            .appendTo('#displayPanel')
            .highcharts({
            chart: {
                    marginLeft: 40, // Keep all charts left aligned
                    spacingTop: 20,
                    spacingBottom: 20
                },
                title: {
                    text: dataset.name,
                    align: 'left',
                    margin: 0,
                    x: 30
                },

                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },

                xAxis: {
                    type: 'datetime',
                    labels: {
                        formatter: function () {
                            return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.value);
                        }
                    },
                    crosshair: true,

                },
                series: [{
                    data: dataset.data,
                    name: dataset.name,
                    type: dataset.type,
                    color: Highcharts.getOptions().colors[i],
                }]
        });

        // Append the chart
        //div.appendTo("#displayPanel");
    });

我按以下顺序加载JS：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../highcharts/highcharts.js"></script>
<script src="../highcharts/modules/exporting.js"></script>
<script src="../highcharts/themes/dark-unica.js"></script>
<script src="../PageJS/Admin/SynchronizedChart.js"></script>

我收到的错误如下：

SynchronizedChart.js:94 Uncaught TypeError: $(...).appendTo(...).highcharts is not a function
    at Object.<anonymous> (SynchronizedChart.js:94)
    at Function.each (datatables.min.js:14)
    at drawSyncChart (SynchronizedChart.js:81)
    at drawColumnChart (Chart.js:9)
    at HTMLSelectElement.<anonymous> (ChemicalAnalysisChart.js:45)
    at HTMLSelectElement.dispatch (datatables.min.js:16)
    at HTMLSelectElement.r.handle (datatables.min.js:16)
    (anonymous) @   SynchronizedChart.js:94
    each        @   datatables.min.js:14
drawSyncChart   @   SynchronizedChart.js:81
drawColumnChart @   Chart.js:9
 (anonymous)    @   ChemicalAnalysisChart.js:45
    dispatch    @   datatables.min.js:16
    r.handle    @   datatables.min.js:16

Answer 1

我通过分离HighCharts的创建并附加到现有容器来解决了这个问题。请参考以下代码以供参考：

$('<div id="chart' + i + '" class="col-md-20">').appendTo('#displayPanel');

var chart = new Highcharts.Chart({....... });

在附加图表之前也清除了容器。

$(".highcharts-container").remove();

同步HighChart：未捕获TypeError：$（...）。appendTo（...）。highcharts不是函数

1 个答案: