使用 Highcharts 在网页上创建图表

Question

我需要使用 Highcharts 在我的网页上创建一个条形图。我正在使用以下代码，但没有显示任何内容。我是编写网页脚本的新手，所以我不确定哪里出了问题。

<div id="container1" style="width:100%; height:400px;"></div>

function create_graph(graph) {
    chart = new Highcharts.Chart ({
        chart: {
             height: 600,
             width: 1200,
             renderTo: container1,
             type: 'column'
             //reflow: false
        },
        title: {
            text: graph["graphTitle"]
        },
        xAxis: {
            categories: graph["xAxisLabels"]
        },
        yAxis: {
            min: 0,
            title: {
                text: graph["yaxisTitle"]
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: generateLineData(graph)
    });
}

graph = {"graphTitle": "Title" ,"xAxisLabels" : xAxisLabels, "xAxisTitle" : "Properties", "yAxisTitle" : "Average percentile", "yAxisValues" : array1}

Answer 1

您必须在创建对象 graph 之前初始化 javascript 变量 xAxisLabels 和 array1。然后，当然，按照您的代码逻辑，您应该调用 create_graph(graph);。最后，您的 generateLineData() 函数应如下所示：

function generateLineData(g) {
    return [{ data: g["yAxisValues"] }];
}

如果满足所有这些前提，那么应该显示您的图表。您可以在此 jsfiddle 演示中验证它：http://jsfiddle.net/tgnu5941/2/

使用 Highcharts 在网页上创建图表

Creating graph on webpage using Highcharts

javascript

html

highcharts