为Django视图添加上下文导致Highcharts地图无法渲染的问题求助

根因定位 #

问题本质是JS全局变量重名引发的语法错误，直接中断Highcharts的执行流程：

• 传入context时，模板渲染出的Chart.js脚本可正常执行，在全局作用域声明const data存储柱状图配置。
• 后续Highcharts脚本块同样在全局作用域声明let data存储地图地理数据。同一作用域下重复声明已存在的常量会触发语法错误，Highcharts初始化逻辑直接中断，地图无法渲染。
• 删除context时，模板中的变量占位符无匹配值，会导致Chart.js脚本块出现语法错误，JS引擎直接跳过该块执行，全局作用域不会留下data常量，此时Highcharts的变量声明无冲突，地图可正常渲染，但柱状图也会完全失效。

操作步骤 #

1. 消除变量命名冲突
   修改Chart.js部分的全局变量名，避开与Highcharts脚本内变量的重名问题：

   // 替换原有Chart.js脚本中的变量定义
   const maskLabels = {{statesMaskName|safe}};
   const maskBarConfig = {
       labels: maskLabels,
       datasets: [{
           label: '% Population',
           color: 'orange',
           backgroundColor: 'orange',
           borderColor: 'orange',
           data: {{statesMaskPerc|safe}},
       }]
   };
   const chartConfig = {
       type: 'bar',
       data: maskBarConfig,
       options: {
           indexAxis: 'y',
           color: 'white',
           scales: {
               y: {
                   grid: { color: '#b3b1ad' },
                   ticks: { color: 'white' },
                   display: false
               },
               x: {
                   grid: { color: '#b3b1ad' },
                   ticks: {
                       color: 'white',
                       callback: function(value) {
                           return value + '%';
                       }
                   }
               }
           }
       }
   };
   var myChart = new Chart(
       document.getElementById('myChart'),
       chartConfig
   );
   

2. 优化Django到JS的数据传递
   避免直接用|safe渲染Python列表到JS脚本中，减少特殊字符转义引发的问题，可替换为Django内置的json_script过滤器：
   • 在模板中原先渲染变量的位置替换为：

     {{ statesMaskName|json_script:"states-mask-name" }}
     {{ statesMaskPerc|json_script:"states-mask-perc" }}
     

   • JS中通过DOM读取合法JSON数据：

     const maskLabels = JSON.parse(document.getElementById('states-mask-name').textContent);
     const maskPerc = JSON.parse(document.getElementById('states-mask-perc').textContent);
     

3. 校验脚本加载顺序
   确保所有第三方依赖脚本在业务逻辑之前加载完成，避免依赖未就绪导致的初始化失败。

修复效果 #

完成调整后，两个脚本块都可无冲突正常执行，即可实现Chart.js柱状图与Highcharts钻取地图的同时渲染。

内容的提问来源于stack exchange，提问作者Mike C.