javascript - highcharts.js 自定义图表实现

Question

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

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
        }
    }
}

演示 参考

然后在标记内添加点值。
我将使用前面的代码作为示例。
默认情况下，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它来格式化它的数字。
演示

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

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

这是结果。
当然，它并不完美。但它可能是，我只是想向你展示使用 Highcharts 是可能的，你有很多选择和一个很好的参考可以帮助你。