Question

以下是我用来尝试生成highcharts迷你图的整个文档：

<script>
var sparkOptions = {
    title: {
        text: ''
    },
    credits: false,
    chart: {
        renderTo: 'container',
        width: 120,
        height: 20,
        type: 'area',
        margin: [2, 0, 2, 0],
        style: {
            overflow: 'visible'
        },
        skipClone: true
    },
    yAxis: {
        endOnTick: false,
        startOnTick: false,
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        tickPositions: [0]
    },
    xAxis: {
        labels: {
            enabled: false
        },
        title: {
            text: null
        },
        startOnTick: false,
        endOnTick: false,
        tickPositions: []
    },
    legend: {
        enabled: false
    },
    tooltip: {
        enabled: false
    }
};

$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();

t.addSeries({
    data: [1, 2, 3, 4, 5]
});
</script>

<div id="container" style="height: 40px; width: 200px;">
    <div id="the_chart"></div>
</div>

我一直在寻找好几个小时才能让它发挥作用。谁能指出我做错了什么？我一直在使用此链接：http://jsfiddle.net/cainmodyo/VhxDA/以及highcharts网站：http://www.highcharts.com/demo/sparkline/。在此先感谢您的帮助，您可以给我！

Answer 1

在Highcharts中，您有两种方法可以定义WHERE来放置图表：

使用renderTo

chart

在容器的JQuery对象上调用highcharts()函数（例如：$('#container').highcharts({options})

在您的代码中，您使用了两种方法，因为您在renderTo: 'container'中定义了sparkOptions，然后在另一个JQuery对象上调用了highcharts方法$('#the_chart').highcharts(sparkOptions);

要使其有效，您应该更改最后一行：

$('#the_chart').highcharts(sparkOptions); var t = $('#the_chart').highcharts();

为：

var t = new Highcharts.Chart(sparkOptions);

并删除html中的额外容器，ID为the_chart的容器。

此外，您应该将代码包装成＆＃39; $（function（）{＆lt;＆lt;＆lt; HERE YOUR SCRIPT＆gt;}}）;＆＃39;确保在加载Highcharts后执行它。

Fiddle

如何让Highcharts Sparkline出现在我的页面上。

1 个答案: