Question

我需要使用JS http://i.stack.imgur.com/6gusX.png来实现这样简单的图表我查看了highcharts.js lib，但是我找不到现成的解决方案或者sinilar图表。如果有人知道可以帮助实现它的工具，请帮助。

Answer 1

可以使用Highcharts完成。

要格式化标记，请使用以下代码。

plotOptions: {
    // means all series types, you can change it according to the serie type
    series: {
        marker: {
            radius: 8,
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: null
        }
    }
}

demo reference

然后在标记中添加点值。
我将使用前面的代码作为示例默认情况下，dataLabels已停用，因此您必须enable，然后将其设置为y位置。

plotOptions: {
    // means all series types, you can change it according to the serie type
    series: {
        marker: {
            radius: 12,
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: null
        },
        dataLabels: {
            enabled: true,
            y: 13,
            // default formatter
            formatter: function() {
                return this.y;
            }
        }
    }
}

我更改了半径值，因为它太小而无法放入数字，您可以使用formatter格式化它的数字。
demo

然后你必须设置xAxys标签样式。

xAxis: {
    labels: {
        style: {
            color: 'orange',
            fontWeight: 'bold',
            'font-size': '20px'
        }
    }
}

结果是here 当然，这并不完美。但它可以，我只是想告诉你可以使用Highcharts 来做这件事，你有很多选项和一个好reference那个可以帮到你。

highcharts.js自定义图表实现

1 个答案: