可滚动的canvasjs图表答案

【问题标题】：Scrollable canvasjs chart可滚动的canvasjs图表
【发布时间】：2017-06-13 13:48:44
【问题描述】：

我正在尝试制作可滚动的垂直 canvasjs 图表。

这是html：

<div style="height:300px; width: 100%; overflow-y:scroll">
    <div id="dataContainer" style="width: 100%;"></div>
</div>

这是javascript：

var chart = new CanvasJS.Chart("dataContainer",
{  
    title:{
        text: data['name']            
    },
    axisY:{
       gridThickness: 0,
     },           
    data: [{
        animationEnabled: false,
        indexLabelPlacement: "inside",
        indexLabelFontColor: "white",
        indexLabelFontWeight: 600,
        indexLabelFontFamily: "Verdana",
        type: "bar",
        dataPoints: dataPoints[0]
    },
    {
        animationEnabled: false,
        indexLabelPlacement: "inside",
        indexLabelFontColor: "white",
        indexLabelFontWeight: 600,
        indexLabelFontFamily: "Verdana",
        type: "bar",
        dataPoints: dataPoints[1]
    }           
    ]
});

chart.render();

这是结果：

我已经添加了dataPointWidth：

var chart = new CanvasJS.Chart("dataContainer",
{  
    dataPointWidth: 20, 
    title:{
        text: data['name']            
    },
 ...
};

这是结果（看起来像一个错误）：

如何制作带有滚动条和正常大小列的图表？

【问题讨论】：

随着 dataPointWidth 的增加，您必须增加图表/容器的高度。
桑乔伊：谢谢。但这是解决方法，因为我不知道它的高度，它取决于图表数据。我可以设置很大的高度，但是滚动条会出错。
它没有帮助。
默认情况下，图表会自动计算 dataPointWidth 以提供漂亮的视图。但在您的情况下，您将 dataPointWidth 设置为一个太大的值。因此，为了显示给定高度中的所有数据点，它们相互重叠。为了便于理解，请考虑以下示例：您有一个高度为 100 像素的容器，并且在其中放置了 2 个条形图。如果每个条的宽度为 60px，则它们必须重叠 20px。
Sanjoy：我想避免这种情况。我的图表可能非常大，当我将内部 div 高度设置为 30 000 像素时，canvasjs 图表会引发错误。

标签： javascript charts canvasjs

【解决方案1】：

google charts library 工作正常。

【讨论】：