Question

我使用canvasjs绘制柱形图。我使用的是此链接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生成的文本文件而不是dataPoints中的默认值。测试文件数据看起来像用逗号分隔的字典数据。以下是文本文件数据的示例：

     {'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]
                    }]
         };

以上是名义上的方式。您可以更改＆＃34;标签：＆＃34;数据集和＆＃34;数据：＆＃34;已加载数据的数据集。

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

1 个答案: