Question

我是chart.js的新手。

数据来自数据库，下面的代码是程序生成的。

我只能用一个轴散布图，但是现在我添加了更多y轴，我在chrome检查器控制台中遇到错误graphPage.html:90 Uncaught SyntaxError: Unexpected token {。

我一直在尝试删除脚本的各个部分，但它会产生更多错误。当我在Sublime Text 2中检查它时，括号似乎匹配。

是否遗失了令牌 - 我还没找到。感谢。

<html>
<head>
<style type="text/css">

body { 
  background:#FFFFFF;
  padding: 5px;
}

h4 { 
  text-align: center;
  font-size: 20vw;
}

.chart-container {
    position: relative;
    margin: auto;
    height: 350px;
    width: 400px;
}

</style></head>

  <body>
    <h4>Batch cost for ISOPROPANOL pct.</h4>
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>
  </body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script type="text/javascript">
     var ctx=document.getElementById('myChart').getContext('2d');
     var chart=new Chart(ctx, {

     type: 'scatter',
     data: {
          datasets: [{
               label: 'A',
               yAxisID: 'A',
               fill: false,
               borderColor: 'rgb(26, 54, 99)',
               data: [
                 {x: 5, y: 16721.8914969083}, 
                 {x: 10, y: 15901.5550392998}, 
                 {x: 15, y: 15081.2185816913}, 
                 {x: 20, y: 14260.8821240829}, 
                 {x: 25, y: 13440.5456664744}, 
                 {x: 30, y: 12620.2092088659}, 
                 {x: 35, y: 11799.8727512574}, 
                 {x: 40, y: 10979.5362936489}, 
                 {x: 45, y: 10159.1998360404}, 
                 {x: 50, y: 9338.86337843194}, 
                 {x: 55, y: 8518.52692082345}, 
                 {x: 60, y: 7698.19046321496}, 
                 {x: 65, y: 6877.85400560647}, 
                 {x: 70, y: 6057.51754799798}, 
                 {x: 75, y: 5237.1810903895}, 
                 {x: 80, y: 4416.84463278101}, 
                 {x: 85, y: 3596.50817517252}, 
                 {x: 90, y: 2776.17171756404}, 
                 {x: 95, y: 1955.83525995555}
                     ]
                         }, {
               label: 'B',
               yAxisID: 'B',
               fill: false,
               borderColor: 'rgb(35, 99, 69)',
               data: [
                 {x: 5, y: 56.7749401173531}, 
                 {x: 10, y: 113.549880234706}, 
                 {x: 15, y: 170.324820352059}, 
                 {x: 20, y: 227.099760469412}, 
                 {x: 25, y: 283.874700586765}, 
                 {x: 30, y: 340.649640704119}, 
                 {x: 35, y: 397.424580821472}, 
                 {x: 40, y: 454.199520938825}, 
                 {x: 45, y: 510.974461056178}, 
                 {x: 50, y: 567.749401173531}, 
                 {x: 55, y: 624.524341290884}, 
                 {x: 60, y: 681.299281408237}, 
                 {x: 65, y: 738.07422152559}, 
                 {x: 70, y: 794.849161642943}, 
                 {x: 75, y: 851.624101760297}, 
                 {x: 80, y: 908.39904187765}, 
                 {x: 85, y: 965.173981995003}, 
                 {x: 90, y: 1021.94892211236}, 
                 {x: 95, y: 1078.72386222971}
                     ]
          }]
     },
     options: {
         responsive: true,
         maintainAspectRatio: false,
         legend: {
              display: false
                      }, 
          scales: {
               xAxes: [{
                    type: 'linear',
                    position: 'bottom',
                    scaleLabel: {
                        display: true, 
                        labelString: 'Concentration, percent' 
                         },
                    ticks: {
                         min: 0,
                         max: 100
                         }
               }],
               yAxes: [{
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                    scaleLabel: {
                        display: true, 
                        labelString: 'Batch cost $' 
                         },
                    ticks: {
                         min: 0
                         }, {
                    id: 'B',
                    type: 'linear',
                    position: 'right',
                    scaleLabel: {
                        display: true, 
                        labelString: 'Ingr cost $' 
                         },
                    ticks: {
                         min: 0
                         }
                     }
               }]
            }
     } 
 }); 
</script>

Answer 1

http://www.chartjs.org/docs/latest/axes/#updating-axis-defaults

但还有其他错误

Chart.js db中的javascript在添加轴后停止工作

1 个答案: