轴边框未显示在canvasjs折线图中

时间:2015-11-19 15:19:41

标签: charts axis canvasjs

我无法显示轴的边框/线。 我检查了canvasjs.com但在文档中找不到任何相关内容。

有什么想法吗?

JSiddle

enter image description here

此图表的设置在以下代码中给出。

HTML

<div id="chartContainer" style="height: 360px; width: 360px;"></div>

JAVASCRIPT

        var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",


        toolTip: {
        shared: true
      },
        title:{
        text: "",  
      },
        axisX: {
        labelFontSize: 11,  
        labelFontColor: "black", 
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        interval: 10,
        minimum: 15,
        maximum: 95,
      },
        axisY: {
        labelFontSize: 11, 
        labelFontColor: "black",
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        gridThickness: 0,
        lineColor: "gray", 
        interval: 20,
        minimum: 170,
        maximum: 400,
      },

        data: [ 
            {   
                type: "line",
                //axisYType: "secondary",
                name: "Downloads",
                lineThickness: 2,
                //showInLegend: true,
                name: "downloads",
                markerType: "none",
                dataPoints: [
                { x: 46, y: 170 },
                { x: 40, y: 353 },
                { x: 47, y: 397 },
                { x: 47, y: 397 },
                { x: 57, y: 396 },
                { x: 92, y: 353 },
                { x: 70, y: 170 },
                ]
            },

            {        
                type: "line",
                markerType: "none",
                //showInLegend: true,
                lineThickness: 2,
                name: "visits",
                dataPoints: [
                { x: 39, y: 170 },
                { x: 35, y: 255 },
                { x: 27, y: 262 },
                { x: 17, y: 355 },
                { x: 25, y: 392 },
                { x: 57, y: 396 },
                { x: 92, y: 353 },
                { x: 70, y: 170 },
                ]
            },
            {        
                type: "line",
                //showInLegend: true,
                 markerType: "cross",
                name: "Unique Visits",
                lineThickness: 2,
                dataPoints: [
                { x: 60, y: 280 },
                ]
            },
            ],

        });

 chart.render();

1 个答案:

答案 0 :(得分:3)

ethannn,

这似乎是“theme2”中的一个错误。 “theme1”似乎工作正常。

在“theme2”中,您可以通过设置lineThickness as shown here来解决此问题。

axisX:{
      lineThickness: 2
   },
axisY:{
      lineThickness: 2
   }