Question

我正在使用canvasJS在materializecss中实现图形，但是文本和图像模糊不清这是我从canvasjs的官方网站获取的代码

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    title:{
        text: "Top Oil Reserves"
    },
    axisY: {
        title: "Reserves(MMbbl)"
    },
    data: [{        
        type: "column",  
        showInLegend: true, 
        legendMarkerColor: "grey",
        legendText: "MMbbl = one million barrels",
        dataPoints: [      
            { y: 300878, label: "Venezuela" },
            { y: 266455,  label: "Saudi" },
            { y: 169709,  label: "Canada" },
            { y: 158400,  label: "Iran" },
            { y: 142503,  label: "Iraq" },
            { y: 101500, label: "Kuwait" },
            { y: 97800,  label: "UAE" },
            { y: 80000,  label: "Russia" }
        ]
    }]
});
chart.render();

</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Answer 1

看起来y axis文本已像素化。您可以在titleFontFamily上使用axisY来使用一种字体，以使您更喜欢。在下面的代码段中，我使用了verdana。

var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2", // "light1", "light2", "dark1", "dark2"
        title:{
            text: "Top Oil Reserves"
        },
        axisY: {
            title: "Reserves(MMbbl)",
            titleFontFamily: "verdana"
        },
       
        data: [{        
            type: "column",  
            showInLegend: true, 
            legendMarkerColor: "grey",
            legendText: "MMbbl = one million barrels",
            dataPoints: [      
                { y: 300878, label: "Venezuela" },
                { y: 266455,  label: "Saudi" },
                { y: 169709,  label: "Canada" },
                { y: 158400,  label: "Iran" },
                { y: 142503,  label: "Iraq" },
                { y: 101500, label: "Kuwait" },
                { y: 97800,  label: "UAE" },
                { y: 80000,  label: "Russia" }
            ]
        }]
    });
    chart.render();

    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </body>

画布上的文字和图像模糊不清

1 个答案: