如何使用canvasjs绘制使用文本数据的柱状图

Question

我正在使用 canvasjs 绘制柱形图。我正在使用此 link https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/column/oil_reserves/ 中的代码，代码如下：

 <!DOCTYPE HTML>
 <html>
 <head>  
 <title>Basic HTML5 Column Chart </title>
 <script type="text/javascript">
 window.onload = function () {
 var chart = new CanvasJS.Chart("chartContainer",
  {
  title:{
    text: "Top Oil Reserves"    
  },
  animationEnabled: true,
  axisY: {
    title: "Reserves(MMbbl)"
  },
  legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center"
  },
  theme: "theme2",
  data: [

  {        
    type: "column",  
    showInLegend: true, 
    legendMarkerColor: "grey",
    legendText: "MMbbl = one million barrels",
    dataPoints: [      
    {y: 297571, label: "Venezuela"},
    {y: 267017,  label: "Saudi" },
    {y: 175200,  label: "Canada"},
    {y: 154580,  label: "Iran"},
    {y: 116000,  label: "Russia"},
    {y: 97800, label: "UAE"},
    {y: 20682,  label: "US"},        
    {y: 20350,  label: "China"}        
    ]
  }   
  ]
});

chart.render();
}
</script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 </head>
 <body>
 <div id="chartContainer" style="height: 300px; width: 100%;">
 </div>
 </body>
 </html>

现在我想使用从 python 生成的文本文件，而不是数据点中的默认值。测试文件数据看起来像一个用逗号分隔的字典数据。这是文本文件数据的示例：

     {'DNS_SERVER1': 2.768651, 'FTP_SERVER1': 2.488129, 'AUTHENTICATION_SERVER1': 2.768651, 'WAP_SERVER1': 2.768651, 'WEB_SERVER1': 2.768651, 'EMAIL_SERVER1': 2.768651}

我希望标签位于分号之前的第一部分，如 'DNS_SERVER1'，值 y 等于分号的第二部分，如 2.768651。我如何使用 canvasjs 脚本执行此操作？感谢任何帮助。

谢谢。

Answer 1

您必须将文件读取到两个单独的数据集（LABELS 和 DATA）并像这样插入它们：

  data = {
          labels: ["DNS_SERVER", "FTP_SERVER", "AUTH_SERVER"],
          datasets: [{
             label: 'Performance',
              data: [2.768651, 2.488129, 2.768651]
                    }]
         };

以上是名义上的方式。您可以为加载的数据更改 "labels:" 数据集和 "data:" 数据集。

如何使用canvasjs绘制使用文本数据的柱状图

How to use canvasjs to draw column chart using text data

canvasjs

chart.js