javascript - Morris.js折线图中点的颜色和样式如何修改？

Question

我使用 morris.js绘制折线图图形，但我无法弄清楚如何仅更改折线图中的点颜色和样式。 有谁知道如何只更改点样式？

谢谢。

Answer 1

使用 pointFillColors 属性。 来自文档:

pointFillColors Colors for the series points. By default uses the same values as lineColors

这是带有蓝线和绿点的图表示例:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="morris.min.js"></script>
<script type="text/javascript">
function drawChart() {
    Morris.Line({
        element: 'chart',
        data: [
            {y: '2012', a: 100},
            {y: '2011', a: 75},
            {y: '2010', a: 50},
            {y: '2009', a: 75},
            {y: '2008', a: 50},
            {y: '2007', a: 75},
            {y: '2006', a: 100}
        ],
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Test series'],
        lineColors: ['#0b62a4'],
        pointFillColors: ['#00ff00']
    });
}

window.onload = drawChart;
</script>
<div id="chart" style="width: 400px; height: 250px;"></div>