javascript 图表未显示

Question

系统确实进入了脚本，但没有显示图表。我不确定为什么。因为对于其他图表，我一直在使用与此相同的方法。但其他图表在同一页面上显示良好。只是这张图没有显示。另外，我曾尝试使用 canvas 等等，但仍然无法正常工作。需要有人帮助我吗？

这是html代码：

  <div class="col-md-6" style="padding:10px;background-color:greenyellow;height:500px;">
                            AQI
                            <div id="containeraqi" style="height:250px;"></div>
                        </div>

javascript

<script>
    anychart.onDocumentReady(function () {
        var data = [
            { x: 'Food is tasteless', value: 65 },
            { x: 'Wait time', value: 109 },
            { x: 'Unfriendly staff', value: 12.5 },
            { x: 'Not clean', value: 45 },
            { x: 'Overpriced', value: 250 },
            { x: 'To noisy', value: 27 },
            { x: 'Food not fresh', value: 35 },
            { x: 'Small portions', value: 170 },
            { x: 'Not atmosphere', value: 35 },
            { x: 'Food is to salty', value: 35 }
        ];
        
        // create pareto chart with data
        var chart = anychart.pareto(data);
        // set chart title text settings
        chart.title('Graf Berdasarkan AQI, Bilangan Pokok dan Tahun');
        // set measure y axis title
        chart.yAxis(0).title('Defect frequency');
        // cumulative percentage y axis title
        chart.yAxis(1).title('Cumulative Percentage');
        // turn on chart animation
        chart.animation(true);

        // create horizontal line marker
        chart
            .lineMarker()
            .value(80)
            .axis(chart.yAxis(1))
            .stroke('#A5B3B3', 1, '5 2', 'round'); // sets stroke

        // get pareto column series and set settings
        var column = chart.getSeriesAt(0);
        column.tooltip().format('Value: {%Value}');

        // get pareto line series and set settings
        var line = chart.getSeriesAt(1);
        line.seriesType('spline').markers(true);
        line.yScale().ticks().interval(10);
        line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');
        line
            .tooltip()
            .format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');

        // turn on the crosshair and set settings
        chart.crosshair().enabled(true).xLabel(false);

        // set container id for the chart
        chart.container('containeraqi');
        // initiate chart drawing
        chart.draw();
    });
</script>

谁能帮帮我？请??

Answer 1

它对我有用...你甚至可以在这里运行它（点击：运行 conde snippet）。

我唯一添加的是加载任何图表...也许您的脚本 src 有误，或者 html.

的其余部分有问题

    anychart.onDocumentReady(function () {
        var data = [
            { x: 'Food is tasteless', value: 65 },
            { x: 'Wait time', value: 109 },
            { x: 'Unfriendly staff', value: 12.5 },
            { x: 'Not clean', value: 45 },
            { x: 'Overpriced', value: 250 },
            { x: 'To noisy', value: 27 },
            { x: 'Food not fresh', value: 35 },
            { x: 'Small portions', value: 170 },
            { x: 'Not atmosphere', value: 35 },
            { x: 'Food is to salty', value: 35 }
        ];
        
        // create pareto chart with data
        var chart = anychart.pareto(data);
        // set chart title text settings
        chart.title('Graf Berdasarkan AQI, Bilangan Pokok dan Tahun');
        // set measure y axis title
        chart.yAxis(0).title('Defect frequency');
        // cumulative percentage y axis title
        chart.yAxis(1).title('Cumulative Percentage');
        // turn on chart animation
        chart.animation(true);

        // create horizontal line marker
        chart
            .lineMarker()
            .value(80)
            .axis(chart.yAxis(1))
            .stroke('#A5B3B3', 1, '5 2', 'round'); // sets stroke

        // get pareto column series and set settings
        var column = chart.getSeriesAt(0);
        column.tooltip().format('Value: {%Value}');

        // get pareto line series and set settings
        var line = chart.getSeriesAt(1);
        line.seriesType('spline').markers(true);
        line.yScale().ticks().interval(10);
        line.labels().enabled(true).anchor('right-bottom').format('{%CF}%');
        line
            .tooltip()
            .format('Cumulative Frequency: {%CF}% \n Relative Frequency: {%RF}%');

        // turn on the crosshair and set settings
        chart.crosshair().enabled(true).xLabel(false);

        // set container id for the chart
        chart.container('containeraqi');
        // initiate chart drawing
        chart.draw();
    });

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-bundle.min.js"></script>
  <div class="col-md-6" style="padding:10px;background-color:greenyellow;height:500px;">
                            AQI
                            <div id="containeraqi" style="height:250px;"></div>
                        </div>

javascript 图表未显示

javascript chart not displaying

javascript

html

graph

analytics